Верстаем отзывчивый сайт правильно с 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. Наличие желания создавать сайты с версткой, которую удобно поддерживать