Нужно ли писать медиа-запросы для каждого элемента или существуют другие методы?
Пишу тестовый проект для портфолио, сейчас занят адаптацией под мобильные устройства, и вот в процессе встал такой вопрос, неужели мне придется писать тонны кода для медиа-запросов, адаптируя каждую картинку и текст? Я не боюсь писать большое кол-во кода, я лишь боюсь что это не самая лучшая практика и я чего-то не знаю, поэтому хочу попросить совета у знающих людей.
Ответы (2 шт):
изначально в версте нужно предусмотреть некоторые моменты - это использование флексов, адаптивной сетки грид(если требуется) - в этих технология предусмотрены настройки для адаптива (тема глубокая - надо изучать), избегать фиксированной ширины у блоков и картинкам сразу прописывать адаптивные стили(ширина 100%, максимальная ширина, высота авто) и тогда значительно уменьшиться кол-во кода при адаптации сайта)
Нужно ли писать медиа-запросы для каждого элемента или существуют другие методы?
если имеешь ввиду под каждую картинку выделение отдельного медиа запроса, даже в том случае если для всех границы одни? разумеется в этом нет необходимости. медиа запросы работают как контейнеры вот наглядный рабочий пример:
@media screen{
#a{color: #500;}
#b{color: #a00;}
#c{color: #c00;}
#d{color: #999;}
}
@media print{
#a{color: #005;}
#b{color: #00a;}
#c{color: #00c;}
#d{color: #ccc;}
}<b id=a>a</b><br/>
<b id=b>b</b><br/>
<b id=c>c</b><br/>
<b id=d>d</b><br/>