Na podstawie odpowiedzi bisio i kodu Bootstrap 3, udało mi się wymyślić dokładniejszą odpowiedź dla każdego, kto chce skopiować i wkleić kompletny zestaw zapytań o media do swojego arkusza stylów:

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

}

Jeśli używasz LESS lub SCSS / SASS i używasz wersji less / SCSS Bootstrap, możesz również użyć zmiennych , pod warunkiem, że masz do nich dostęp. Mniej tłumaczenie odpowiedzi @ full-decent brzmiałoby następująco:

@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){}  /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){}  /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){}  /* deprecated: @screen-lg-desktop, or @screen-lg */

Istnieją również zmienne dla @screen-sm-max i @screen-md-max, które są odpowiednio o 1 piksel mniejsze niż @screen-md-min i @screen-lg-min, zazwyczaj dla @media(max-width).

EDIT: jeśli używasz SCSS/SASS, zmienne zaczynają się od $ zamiast @, więc będzie $screen-xs-max itd.

Są to wartości z Bootstrap3:

/* Extra Small */
@media(max-width:767px){}

/* Small */
@media(min-width:768px) and (max-width:991px){}

/* Medium */
@media(min-width:992px) and (max-width:1199px){}

/* Large */
@media(min-width:1200px){}

Oto dwa przykłady.

Gdy viewport osiągnie szerokość 700px lub mniejszą, wszystkie znaczniki h1 będą miały 20px.

@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Ustaw wszystkie h1 ' s 20px aż viewport osiągnie 700px lub większe.

@media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Hope this helps: 0)

Oto bardziej modułowy przykład użycia LESS do naśladowania Bootstrap bez importowania plików less.

@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;

//xs only
@media(max-width: @screen-xs-max) {

}
//small and up
@media(min-width: @screen-sm-min) {

}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

}
//md and up
@media(min-width: @screen-md-min) {

}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {

}
//lg and up
@media(min-width: @screen-lg-min) {

}

Od wersji Bootstrap v3.3.6 używane są następujące zapytania o media, które odpowiadają dokumentacji opisującej dostępne klasy responsywne ( http://getbootstrap.com/css/#responsive-utilities).

/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {}

/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}

Zapytania o Media wydobyte z repozytorium Bootstrap GitHub z poniższego mniej pliki: -

Https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less

Na podstawie odpowiedzi innych użytkowników, napisałem te niestandardowe mixiny dla łatwiejszego użycia:

Less input

.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }

Przykładowe użycie

body {
  .when-lg({
    background-color: red;
  });
}

Wejście SCSS

@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }

Przykładowe użycie:

body {
  @include when-md {
    background-color: red;
  }
}

Wyjście

@media (min-width:1200px) {
  body {
    background-color: red;
  }
}

Lub prosty Sass-Kompas:

@mixin col-xs() {
    @media (max-width: 767px) {
        @content;
    }
}
@mixin col-sm() {
    @media (min-width: 768px) and (max-width: 991px) {
        @content;
    }
}
@mixin col-md() {
    @media (min-width: 992px) and (max-width: 1199px) {
        @content;
    }
}
@mixin col-lg() {
    @media (min-width: 1200px) {
        @content;
    }
}

Przykład:

#content-box {
    @include border-radius(18px);
    @include adjust-font-size-to(18pt);
    padding:20px;
    border:1px solid red;
    @include col-xs() {
        width: 200px;
        float: none;
    }
}

Należy pamiętać, że unikanie skalowania tekstu jest głównym powodem istnienia układów responsywnych. Cała logika responsywnych witryn polega na tworzeniu funkcjonalnych układów, które skutecznie wyświetlają treści, dzięki czemu są łatwe do odczytania i użyteczne na wielu ekranach.

Chociaż w niektórych przypadkach konieczne jest skalowanie tekstu, uważaj, aby nie zminiaturyzować witryny i nie przegapić punktu.

@media(min-width:1200px){

    h1 {font-size:34px}

}
@media(min-width:992px){

    h1 {font-size:32px}

}
@media(min-width:768px){

    h1 {font-size:28px}

}
@media(max-width:767px){

    h1 {font-size:26px}

}

Należy również pamiętać, że 480 viewport został upuszczony w bootstrap 3.

Używamy następujących zapytań o media w naszych plikach Less, aby utworzyć kluczowe punkty przerwania w naszym systemie grid.

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Zobacz także na Bootstrap

Widać w moim przykładzie rozmiary czcionek i kolory tła zmieniają się w zależności od rozmiaru ekranu

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-color: lightgreen;
}
/* Custom, iPhone Retina */ 
@media(max-width:320px){
    body {
        background-color: lime;
        font-size:14px;
     }
}
@media only screen and (min-width : 320px) {
     body {
        background-color: red;
        font-size:18px;
    }
}
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
     body {
        background-color: aqua;
        font-size:24px;
    }
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
     body {
        background-color: green;
        font-size:30px;
    }
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
     body {
        background-color: grey;
        font-size:34px;
    }
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
     body {
        background-color: black;
        font-size:42px;
    }
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>

Tutaj jest jeszcze łatwiejsze rozwiązanie jednego przystanku, w tym oddzielne pliki responsywne oparte na zapytaniach o media.

Pozwala to na istnienie logiki zapytań o media i logiki include tylko na jednej stronie, czytniku. Pozwala to również na to, aby zapytania o media nie zaśmiecały samych arkuszy stylów responsywnych.

//loader.less

// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import '/app/Resources/less/bootstrap.less';

/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here.  When you need a larger screen override, move those     
* overrides to one of the responsive files below
*/
@import 'base.less';

/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)

Baza.mniej wyglądałoby tak

/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
  background-color: @fadedblue;
}

Sm-min.mniej wyglądałoby tak

/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
  background-color: @fadedgreen;
}

Twój indeks musiałby tylko załadować ładowacz.less

<link rel="stylesheet/less" type="text/css" href="loader.less" />

@ media only screen and (max-width: 1200px) {}

@ media only screen and (max-width: 979px) {}

@ media only screen and (max-width: 767px) {}

@ media only screen and (max-width: 480px) {}

@ media only screen and (max-width: 320px) {}

@ media (min-width: 768px) and (max-width: 991px) {}

@ media (min-width: 992px) and (max-width: 1024px) {}

Use media queries for IE;

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}