Разделение медиа запросов

При появлении медиа запросов разработчики начали использовать их при разработке адаптивных дизайнов для веб проектов. Обычное решение представляет собой различные наборы, которые изменяются для разных размеров рабочей области. Но можно использовать разделение стилей, вместо перезаписи.

Обычный вариант:

.box {
  background: #777;
  width: 100%;
  box-shadow: inset 0 1px 3px #333;
}

@media (min-width: 800px) {
  .box{
    width: 760px;
    margin: 20px auto;
    box-shadow: none; /* reset */
  }
}

И вариант тех же стилей с разделением:

.box {
  background: #777;
}

@media (max-width: 799px) {
  .box {
    width: 100%;
    box-shadow: inset 0 1px 3px #333;
  }
}

@media (min-width: 800px) {
  .box{
    width: 760px;
    margin: 20px auto;
  }
}

Идея заключается в определении блока CSS со свойствами по умолчанию, общими для  всех вариантов, а все остальные свойства разделить на различные медиа запросы. Например, для максимальной ширины 799px и для минимальной ширины 800px.

Конечно, получается 3 блока CSS вместо двух. Но такую структуру кода гораздо легче сопровождать и модифицировать. Добавление, удаление и замена свойств CSS не приводит к непредвиденным результатам. А в некоторых случаях такая структура приводит к сокращению размера кода, так как не нужно изменять некоторые свойства, которые не используются для конкретного медиа запроса.

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

.box {
  background: #777;
  width: 760px;
  margin: 20px auto;
}

Затем, можно начинать разделять код просто перемещая свойства, которые различаются для каждого медиа запроса.

После чего, нужно провести "чистку" или "преобразование" кода -> проверить наличие свойств, которые являются одинаковыми для всех медиа запросов и выделить их в отдельный общий блок.

Недостаток: такая техника плохо работает для браузеров, которые не поддерживают медиа запросы. Для таких случаев можно использовать минимальный набор свойств в общем блоке (как резерв).

Также не нет необходимости разделение медиа запросов для каждого селектора, а только для тех, разница в которых для версий десктопа и мобильных устройств существенна. Если же вам нравится все разделять, то можно создать несколько разных файлов и использовать медиа запросы в для <link> , так что не нужно будет загружать неиспользуемые стили.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/CVMrTpMIyiQ/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Разделение медиа запросов | | 2012-09-04 14:09:29 | | Статьи Web-мастеру | | При появлении медиа запросов разработчики начали использовать их при разработке адаптивных дизайнов для веб проектов. Обычное решение представляет собой различные наборы, которые изменяются для | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: