основываясь на ответе bisio и коде Bootstrap 3, я смог придумать более точный ответ для тех, кто просто хочет скопировать и вставить полный набор медиа-запросов в свою таблицу стилей:

/* 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) {

}

если вы используете LESS или SCSS/SASS и используете версию Bootstrap LESS / SCSS, вы можете использовать переменные также, если у вас есть доступ к ним. Менее перевод ответа @full-decent был бы следующим:

@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 */

есть также переменные для @screen-sm-max и @screen-md-max, которые на 1 пиксель меньше, чем @screen-md-min и @screen-lg-min, соответственно, обычно для использования с @media(max-width).

EDIT: если вы используете SCSS/SASS, переменные начинается с $ вместо @, так что $screen-xs-max etc.

Это значения из 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){}

вот два примера.

Как только окно просмотра станет шириной 700px или меньше, сделайте все теги h1 20px.

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

сделайте все 20px h1, пока окно просмотра не достигнет 700px или больше.

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

надеюсь, это поможет :0)

вот более модульный пример использования LESS для имитации Bootstrap без импорта меньшего количества файлов.

@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) {

}

начиная с Bootstrap v3.3.6 используются следующие запросы мультимедиа, которые соответствуют документации, описывающей доступные адаптивные классы (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) {}

медиа-запросы, извлеченные из репозитория Bootstrap GitHub из следующего файлы:-

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

основываясь на ответах других пользователей, я написал эти пользовательские миксины для облегчения использования:

меньше входного сигнала

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

пример использования

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

вход 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; } }

пример использования:

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

выход

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

или простой Sass-компас:

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

пример:

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

имейте в виду, что избежание масштабирования текста является основной причиной существования адаптивных макетов. вся логика отзывчивых сайтов заключается в создании функциональных макетов, которые эффективно отображают ваш контент, чтобы его можно было легко читать и использовать на нескольких размерах экрана.

хотя в некоторых случаях необходимо масштабировать текст, будьте осторожны, чтобы не миниатюризировать свой сайт и пропустить точку.

в любом случае, вот пример.

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

}

также имейте в виду 480 окно просмотра было удалено в bootstrap 3.

мы используем следующие медиа-запросы в наших файлах Less для создания ключевых точек останова в нашей системе сетки.

/* 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) { ... }

Смотрите также на загрузки

вы можете видеть в моем примере размеры шрифта и цвета фона меняются в зависимости от размера экрана

<!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>

вот еще более простое решение для одной остановки, включая отдельные отзывчивые файлы на основе медиа-запросов.

Это позволяет всей логике запроса мультимедиа и логике включения существовать только на одной странице, загрузчике. Это также позволяет не иметь медиа-запросы загромождают сами отзывчивые таблицы стилей.

//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)

базы.меньше будет выглядеть так

/**
* 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.меньше будет выглядеть так

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

ваш индекс будет просто нужно загрузить погрузчик.меньше

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

легко peasy..

@ media only screen и (максимальная ширина : 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 и (максимальная ширина : 320px) {}

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

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

использовать медиа-запросы для 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) {
}