Фантастичні медіа-запити з трохи менше магії

Було б непогано обернути стилі 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 {

  }
}

Сподіваюся, хтось має гарну ідею!

Ось що я робив у своїх проектах:

@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;
  }
}

Це дозволяє визначити медіа-запити лише один раз, і ви можете використовувати їх у менших файлах. Також трохи легше читати. :)

Я повністю погоджуюсь з відповіддю Хай Нгуєна (яка була прийнята), але ви можете ще трохи це прибрати, виконавши щось подібне:

@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 для певного елемента разом і робить ваші стилі набагато модульнішими (проти підходу до розділеної точки зупинки).

+1 для Нгуєна та Янсі - і ще одне доповнення.

Якщо вам потрібне чітке визначення ширини, ви можете виконати це за допомогою string interpolationзмінних і для ваших точок зупинку. Ось, наприклад, з бутстрапом - суворі правила не допускають перекриття визначень.

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

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

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

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

І ви також можете поєднувати медіа-запити, подібні до цього

@media @desktop, @tablet, @ipad{ 

//common styles... 

}

Ми використовуємо таку установку:

@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(); } };

Вам потрібно лише встановити змінні, міксини обробляють решту, тому дуже легко підтримувати, але при цьому все одно гнучко:

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

Варто зазначити, що, хоча ця техніка дуже проста, якщо її використовувати погано, ваш вихід CSS буде наповнений медіа-запитами. Я намагаюся обмежити свої медіа-запити до 1 точки перерви на файл. Де файл буде header.less або search.less.

Примітка. Цей метод, ймовірно, не буде компілювати, якщо ви не використовуєте компілятор javascript.

Я використовую ці комбінації та змінні

.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;
  }
}

@highdensity:  ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
               ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
               ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
               ~"only screen and (min-device-pixel-ratio: 1.5)";

@mobile:        ~"only screen and (max-width: 750px)";
@tab:       ~"only screen and (min-width: 751px) and (max-width: 900px)";
@regular:        ~"only screen and (min-width: 901px) and (max-width: 1280px)";
@extra-large:  ~"only screen and (min-width: 1281px)";

І ось що я використав для свого проекту:

    @mobile:   ~"only screen and (min-width: 320px) and (max-width: 767px)";
    @tablet:    ~"only screen and (min-width: 768px) and (max-width: 991px)";
    @ipad:    ~"only screen and (min-width: 992px) and (max-width: 1024px)";

    @media @mobile {
      .banner{
        width: auto;
      }
    }

    @media @tablet {
      .banner{
        width: 720px;
      }
    }

  @media @ipad {
      .banner{
        width: 920px;
      }
    }