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

[affka]

А какую задачу вообще решает этот плагин? Уменьшить запись на несколько букв и создать вопрос у разработчика «wtf?» — не задачи. xs, md — всегда лежат в переменных, если используются фреймворки (bootstrap/foundation/...)

[AlexPTS]

Полностью согласен с affka. Это всего лишь сахар, который с виду не настолько и лучше, чтобы тянуть fronzy, который ничего нового по сути и не дает.

[dom1n1k]

А если не использовать фреймворки?

[affka]

То изобретаешь собственный фреймворк, где вводишь такие переменные :)

[myanrela]

Fronzy — это не маленький шаг к упрощению работы со стилями, это обувь (в данном случае — кроссовки), в которой вы совершаете этот шаг.
Не нравится Fronzy, выбирайте ботинки — sass-mq.github.io/sass-mq

[Alexious_sh]

На LESS запись как-то покороче получается:

.responsive(@max_width, @rules) {
    @media only screen and (max-width: @max_width) {
        @rules();
    }
}

.mobile(@rules) {
    .responsive(480px, @rules);
}

/* Использование */
.mobile({
    width:100%;
});

[myanrela]

.mobile — это селектор в LESS?

[Xao]

Это миксин.

[kovalevsky]

в LESS не нужно писать @mixin и include, там всё объявляется как класс и используется, собственно, тоже.

[myanrela]

Хорошо, а что мне писать в less-файле, если я хочу использовать стили для класса .main-nav для устройств с экраном меньше 700px?
Как создать такой миксин?

[Alexious_sh]

Миксин .mobile — это «алиас» для удобства использования фиксированных размеров. Можно использовать .responsive() напрямую:

.main-nav {
    position:fixed;

    .responsive(700px, {
        position:static;
    });
}

[myanrela]

В теле less-файла (многострочного) мне будет тяжело идентифицировать .responsive(700px, {… }); как описание медиа-запроса, потому что там нет символа @, который ассоциируется с классическим css медиа-запросом

[Alexious_sh]

Ну это уже, думаю, дело привычки. У меня вот IDE миксины подсвечивает другим цветом, например.

[Ag47]

Разница то SCSS минимальная

@mixin responsive( $max_width ) {
  @media only screen and (max-width: $max_width) {
    @content
  }
}

@mixin mobile {
  +responsive( 480px ) {
    @content;
  }
}

// Использование
@include mobile {
  // ...
}

Хотя, сам я лично использую SASS, на котором ваш миксин еще лакончинее

=responsive( $max_width )
  @media only screen and (max-width: $max_width)
    @content

=mobile
  +responsive( 480px )
    @content


// Использование
+mobile
  // ...

[Metaller]

В первом случае у вас смесь SCSS и SASS. В SCSS нет `+`, должно быть `@include`

[Ag47]

Да, конечно, sass версию в scss переводил, не заметил этот инклюд

[magic4x]

Ну этим уже никого не удивишь, все ж уже давно и плотно на препрцессорах.
Другое дело писать так:

.foo
    width 320px

    +fronzymin(640px)
        width 640px

А на выходе получить все вариации в одном соответствующем медиа-квери в конце файла. Где-то я уже такое видел для stylus.

[dzhiriki]

rupture. И это лучшая реализация media из всех что я видел.

[Metaller]

Вот тоже самое, но более функциональное github.com/zellwk/mappy-breakpoints

[PSDCoder]

А еще есть шикарнейший http://include-media.com/