Адаптивная вёрстка - вид вёрстки, изменяющийся в зависимости от размеров видимой области в браузере.
Например, на мобильном устройстве сайт отображается с большими кнопками, меняется расположение элементов.
Добавить на сайт адаптивность проще, чем делать отдельную мобильную версию сайта.
Делается она с помощью @media
Важно: свойства будут применятся сверху вниз, т.е. нижние свойства переопределяют то, что было написано до них.
Если окно Вашего браузера больше 800px в ширину, то изображения отобразятся ввиде "плитки". Вы можете попробовать уменьшить размер браузера и изображения выстроятся в вертикальную линию, растянувшись на 95% от ширины экрана (с 2.5% отступами со всем сторон)
Зачем изменять font-size в .my-content / .my-content > img?
Когда вложенным элементам выставляется display: inline-block; они воспринимаются браузером как строчные. В таком случае пробелы и переносы строк будут занимать немного дополнительного пространства.
При точной верстке (например, Вы хотите по два элемента в строку и выставляете им width: 50%;), блок будет занимать 50%, но после него будет символ пробела (небольшой отступ). В таком случае следующий блок размером в 50% не влезет в эту строку и будет перенесён на следующую.
Чтобы избежать таких проблем в можно выставить .container { font-size: 0 }
Затем во вложенном блоке восстанавливаете (font-size: 16px;) и контент внутри него будет отображаться (в img, конечно, контента не будет; восстановление font-size: 16px; для примера).
p.s. @media only screen and (min-width: 800px) {} - зависит от размера браузера, а не от ширины контента. Нет смысла пытаться управлять каким-то блоком, чтобы изменить так вложенную верстку.
p.p.s Если ширина не будет меняться, а Вы свойства прописали, то можно попробовать !important;
Возможно, Ваши свойства переопределяются откуда-то ещё:
Но будьте аккуратней с !important, потом свойство с ним переопределить будет сложнее
Спасибо за внимание.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <style>.my-content { overflow: auto; height: 400px; border: 1px solid #aaa; font-size: 0; width: 100%; white-space: initial;}.my-content > img { display: inline-block; border: none; margin: 2.5%; width: 95%; font-size: 16px;}@media only screen and (min-width: 0){ .my-content > img { width: 95%; }}@media only screen and (min-width: 800px){ .my-content > img { width: 45%; }}</style><div class="my-content"> <img src="/images/news/153--16-10-07--1-06-00.jpg" /> <img src="/images/news/153--16-10-07--1-06-00.jpg" /> <img src="/images/news/153--16-10-07--1-06-00.jpg" /></div> |
1 2 3 4 5 | @media only screen and (min-width: 800px) { .my-content img { width: 45% !important; }} |