Материалы. Изменение дизайна в зависимости от разрешения экрана 

10 лет назадМетки: , css в зависимости от разрешения экрана, кнопка на css меняла размер в зависимости от размера окна текст переносился, стиль элемента в зависимости от экрана, в зависимости от дизайна, меняем css в зависимости от разрешения экрана

Настало время разных разрешений экранов мобильных устройств. Как быть с сайтами? Писать для каждого разрешения свой стиль? А как определять разрешение при первой загрузке?

На эти вопросы даёт ответ css3 media queries.

Полный обзор делать не буду, кто интересуется сможет сам найти, но кратко о том как это работает:

После того, как сделали стиль для сайта, можно дописать в него строчки которые будут применены при некоторых условиях. Например:

@media (max-width:600px){  тут описываются стили применяемые если окно уже чем 600 точек;}
@media (min-width:900px){ тут описываются стили применяемые если окно шире чем 900 точек;}

А если к некоторым свойствам применить правило transition, то можно добиться некоторой анимации при перестроении сайта, в случае изменения размеров окна.