Необычные медийные запросы с некоторой МЕНЬШЕЙ магией

Было бы неплохо обернуть CSS-стили для разных разрешений внутри некоторых css-классов, используя меньше.

Я хотел бы сделать что-то вроде:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

В конце должно получиться следующее:

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet может выглядеть примерно так:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

Надеюсь, у кого-то есть хорошая идея!

Ответ 1

Вот что я сделал в своих проектах:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}

Это позволяет вам определять только ваши медиа-запросы один раз, и вы можете использовать его в своих меньших файлах. Также немного легче читать.:)

Ответ 2

Я полностью согласен с ответом Hai Nguyen (который был принят), но вы можете немного почистить его, сделав что-то вроде этого:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

footer{
  width: 100%;
  @media @tablet {
    width: 768px;
  }
  @media @desktop {
    width: 940px;
  }
}

Это, по сути, то же самое, но позволяет вставлять ваши медиа-запросы внутри исходного селектора. Он сохраняет все css для определенного элемента вместе и делает ваши стили более модульными (по сравнению с разделенным методом точки останова).

Ответ 3

+1 для Nguyen и Yancey - и еще одно дополнение.

Если вы хотите явное определение для ширины, вы можете выполнить это с помощью string interpolation и переменных для ваших контрольных точек. Здесь, например, с настройками бутстрапа - строгие правила - это предотвращение перекрытия определения.

/* 
   setup
*/

@xs-min: 480px;
@sm-min: 768px;
@md-min: 992px;
@lg-min: 1200px;

@xs-max: (@sm-min - 1);
@sm-max: (@md-min - 1);
@md-max: (@lg-min - 1);

@phone:          ~"only screen and (min-width: @{xs-min})";
@phone-strict:   ~"only screen and (min-width: @{xs-min}) and (max-width: @{xs-max})";
@tablet:         ~"only screen and (min-width: @{sm-min})";
@tablet-strict:  ~"only screen and (min-width: @{sm-min}) and (max-width: @{sm-max})";
@desktop:        ~"only screen and (min-width: @{md-min})";
@desktop-strict: ~"only screen and (min-width: @{md-min}) and (max-width: @{md-max})";
@large:          ~"only screen and (min-width: @{lg-min})";

/* 
   usage
*/

footer{
    width: 100%;
    @media @tablet {
        width: 768px;
    }
    @media @desktop {
        width: 940px;
    }
}

Ответ 4

И вы также можете комбинировать медиа-запросы, подобные этому

@media @desktop, @tablet, @ipad{ 

//common styles... 

}

Ответ 5

Мы используем такую установку:

@vp_desktop:    801px;
@vp_tablet:     800px;
@vp_mobile:     400px;

.OnDesktop(@rules) { @media screen and (min-width:@vp_desktop){ @rules(); } };
.OnTablet(@rules) { @media screen and (max-width:@vp_tablet){ @rules(); } };
.OnMobile(@rules) { @media screen and (max-width:@vp_mobile){ @rules(); } };

Вам нужно только установить переменные, mixins обрабатывают все остальное, поэтому он очень прост в обслуживании, но все же гибкий:

div {
  display: inline-block;
  .OnTablet({
    display: block;
  });
}

Стоит отметить, что, хотя этот метод очень прост, если использовать плохо, то ваш вывод CSS будет наполнен медиа-запросами. Я пытаюсь ограничить свои медиа-запросы до 1 точки прерывания, для каждого файла. Где файл будет header.less или search.less.

N.B. Этот метод, вероятно, не будет компилироваться, если вы не используете компилятор javascript.

Ответ 6

Я использую эти mixins и переменные

.max(@max; @rules){@media only screen and (max-width: (@max - 1)){@rules();}}
.min(@min; @rules){@media only screen and (min-width: @min){@rules();}}
.bw(@min; @max; @rules){@media only screen and (min-width: @min) and (max-width: (@max - 1)){@rules();}}

@pad: 480px;
@tab: 800px;
@desktop: 992px;
@hd: 1200px;

Итак, это

footer{
    width: 100%;
    .bw(@tab,@desktop,{
        width: 768px;
    });
    .min(@desktop,{
        width: 940px;
    });
}

становится

footer {
  width: 100%;
}
@media only screen and (min-width: 800px) and (max-width: 991px) {
  footer {
    width: 768px;
  }
}
@media only screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}