Верстаем отзывчивый сайт правильно с Fronzy media-queries

Лучший работник — ленивый работник, потому что он стремится выполнить поставленную задачу максимально просто. Задачу, решение которой конвертировалось в методологию Fronzy media-queries, можно описать так:

1. Создать миксины в SCSS-документе для быстрого объявления медиа-запросов
2. Использовать эти миксины в других проектах

Например, мы хотим, чтобы некоторые стили в css-документе применялись только для смартфонов с шириной экрана менее 600px. В css-документе мы напишем этот код:

@media screen and (max-width: 600px) { ... } // три точки - место для стилей 

Но есть более краткая форма записи. В scss-документе пишем этот код:

@include fronzy(xs) { ... } // три точки - место для стилей 

Для большего контраста приведу еще один пример. Мы хотим, чтобы стили отображались только на устройствах с шириной экрана в пределах от 700px до 1000px. В css-документе мы напишем этот код:

@media (min-width: 700px) and (max-width: 1000px) { ... }  

Вариант для ленивых:

@include fronzyfromto(700px, 1000px) { ... }  

Полный список Fronzy медиа-запросов для использования в SCSS-файле:

$xs: 600px; //эта переменная обозначает устройства с шириной экрана менее 600px $lg: 1000px; //эта переменная обозначает устройства с шириной экрана более 1000px  @include fronzy(xs) { ... } // для экранов, которые равны либо меньше 600px @include fronzy(md) { ... } // для экранов, которые больше 601px и меньше 999px @include fronzy(lg) { ... } // для экранов, которые равны либо больше 1000px @include fronzymin(700px) { ... } // для экранов, которые больше 700px (можно указывать любое значение) @include fronzymax(1200px) { ... } // для экранов менее 1200px @include fronzyfromto(300px, 500px) { ... } // для экранов от 300px до 500px  /* также можно создавать свои миксины. Способ создания своих миксинов опишу в конце статьи. */ /* медиа-запрос для iPhone4 выглядит так: */ @include fronzyiphone4() { ... } // данный код после конвертации будет выглядеть так: @media screen and (max-width: 320px) { ... }  /* 320 px - ширина экрана iphone4 */ 

Чтобы использовать Fronzy медиа-запросы, нужно вставить этот код (дефолтные миксины) в ваш SCSS-файл:

/* 1________________________________________ fronzy media-queries */ /* 1.1_____________________ def vars */ $xsdef: 600px; // don`t change this var. You can change -> main vars <- like -> $xs <- $lgdef: 1200px; //don`t change this var. You can change -> main vars <- like -> $lg <- /* btm def vars */ /* 1.2_____________________ main vars */ $xs: $xsdef; // can change. Like this -> $xs: 500px; or $xs: 720px; or $xs: any count; !But count must be < $lg $lg: 800px; // can change Like this -> $lg: 1000px; or $lg: 1300px; !But count must be > $xs /* btm main vars */ /* 1.3_____________________ def mixins */ @mixin fronzy($bp) {   @if $bp == "xs" {     @media screen and (max-width: $xs) {       @content;     }   }    @else if $bp == "mdleft" {     @media screen and (max-width: ($lg - 1)) {       @content;     }   }    @else if $bp == "md" {     @media (min-width: ($xs + 1)) and (max-width: ($lg - 1)) {       @content;     }   }      @else if $bp == "mdright" {     @media screen and (min-width: ($xs + 1)) {       @content;     }   }      @else if $bp == "lg" {     @media screen and (min-width: $lg) {       @content;     }   } }   @mixin fronzymin($min) {   @media screen and (min-width: $min) {     @content;   } }  @mixin fronzymax($max) {   @media screen and (max-width: $max) {     @content;   } }  @mixin fronzyfromto($min, $max) {   @media (min-width: $min) and (max-width: $max) {     @content;   } } /* btm def mixins */ /* 1.4_____________________ user mixins */ /* You can add your own mixins like this:  // @mixin fronzyiphone4() {   @media screen and (max-width: 360px) {     @content;   } } // Add your mixin before -> btm user mixins <- string */ @mixin fronzyiphone4() {   @media screen and (max-width: 360px) {     @content;   } } /* btm user mixins */ /* btm fronzy media-queries. Created by Anre La http://fb.com/myanrela */ 

Посмотреть пример использования Fronzy media-queries можно здесь и здесь.

Свои миксины создаем согласно принципу:

@mixin fronzyiphone4() { /* вместо fronzyiphone4() может быть любое указанное вами имя, но начинаться оно должно с fronzy */   @media screen and (max-width: 360px) { /* здесь можно записать любой классический css медиа-запрос */     @content; /* эту строку оставляем без изменений */   } } 

Подведем итог. Использование Fronzy media-queries невозможно без следующих этапов:

1. Вставка дефолтных миксинов в начало SCSS-документа
2. Наличие желания создавать сайты с версткой, которую удобно поддерживать

ссылка на оригинал статьи http://habrahabr.ru/post/270637/