Разделение медиазапросов
При появлении медиазапросов разработчики начали использовать их при разработке адаптивных дизайнов для веб проектов. Обычное решение представляет собой различные наборы, которые изменяются для разных размеров рабочей области. Но можно использовать разделение стилей, вместо перезаписи.
Обычный вариант:
01 .box {
02 background: #777;
03 width: 100%;
04 box-shadow: inset 0 1px 3px #333;
05 }
06
07 @media (min-width: 800px) {
08 .box{
09 width: 760px;
10 margin: 20px auto;
11 box-shadow: none; /* reset */
12 }
13 }
И вариант тех же стилей с разделением:
01 .box {
02 background: #777;
03 }
04
05 @media (max-width: 799px) {
06 .box {
07 width: 100%;
08 box-shadow: inset 0 1px 3px #333;
09 }
10 }
11
12 @media (min-width: 800px) {
13 .box{
14 width: 760px;
15 margin: 20px auto;
16 }
17 }
Идея заключается в определении блока CSS со свойствами по умолчанию, общими для всех вариантов, а все остальные свойства разделить на различные медиазапросы. Например, для максимальной ширины 799px и для минимальной ширины 800px.
Конечно, получается 3 блока CSS вместо двух. Но такую структуру кода гораздо легче сопровождать и модифицировать. Добавление, удаление и замена свойств CSS не приводит к непредвиденным результатам. А в некоторых случаях такая структура приводит к сокращению размера кода, так как не нужно изменять некоторые свойства, которые не используются для конкретного медиазапроса.
Можно начинать разработку кода с версии без разделения. Это может быть вариант для десктопа или мобильного устройства. Например, для десктопа выше приведенный пример будет иметь вид:
1 .box {
2 background: #777;
3 width: 760px;
4 margin: 20px auto;
5 }
Затем, можно начинать разделять код просто перемещая свойства, которые различаются для каждого медиазапроса.
После чего, нужно провести "чистку" или "преобразование" кода -> проверить наличие свойств, которые являются одинаковыми для всех медиазапросов и выделить их в отдельный общий блок.
Недостаток: такая техника плохо работает для браузеров, которые не поддерживают медиазапросы. Для таких случаев можно использовать минимальный набор свойств в общем блоке (как резерв).
Также нет необходимости разделения медиазапросов для каждого селектора, а только для тех, разница в которых для версий десктопа и мобильных устройств существенна. Если же вам нравится все разделять, то можно создать несколько разных файлов и использовать медиазапросы<link>, так что не нужно будет загружать неиспользуемые стили.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: simurai.com/post/30451824480/media-query-splitting
Перевел: Сергей Фастунов
