这里有两个例子。

一旦视口变成700px宽或更小，使所有h1标签20px。

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

使所有h1的20px，直到视口达到700px或更大。

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

希望这能有所帮助:

引导3

下面是BS3中使用的选择器，如果你想保持一致的话:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

注意:供参考，这可能对调试有用:

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

引导4

下面是BS4中使用的选择器。没有“最低”;BS4的设置因为“extra small”;是默认值。也就是说，你会首先编码XS的大小，然后有这些媒体覆盖之后。

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

引导5

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(min-width:1400px){}

更新2021-05-20:版本3.4.1,4.6.0,5.0.0的信息仍然准确。

请记住，避免文本缩放是响应式布局存在的主要原因。响应式网站背后的整个逻辑是创建功能布局，有效地显示你的内容，使其在多种屏幕尺寸上易于阅读和使用。

虽然在某些情况下缩放文本是必要的，但要注意不要缩小你的网站，从而错过重点。

这里有一个例子。

@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视口已经在引导3中被删除了。

这些是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){}

如果你正在使用LESS或SCSS/SASS，并且你正在使用LESS/SCSS版本的Bootstrap，你也可以使用变量，前提是你可以访问它们。@full-decent的答案的LESS翻译如下:

@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，它们分别比@screen-md-min和@screen-lg-min小1个像素，通常用于@media(max-width)。

编辑:如果你使用SCSS/SASS， 变量以$开始，而不是@，所以它会是$screen-xs-max等。

基于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) {


}

这里有一个更简单的一站式解决方案，包括基于媒体查询的独立响应文件。

这允许所有媒体查询逻辑和包含逻辑只存在于一个页面，即加载器。它还允许媒体查询不会使响应式样式表本身混乱。

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

你的索引只需要加载loader。less

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

容易peasy . .

我们在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) { ... }

另见引导

引导3

/* 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.4.1/less/variables.less#L283 https://github.com/twbs/bootstrap/blob/v3.4.1/less/responsive-utilities.less < / p >

引导5

从版本5的文档中可以看到，自版本3以来，媒体查询断点已经更新，以更好地适应现代设备尺寸。

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }


// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }


// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }


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


// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

来源:引导5文档

你可以在引导GitHub存储库中看到v5.1.3的断点:-

https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L461 https://github.com/twbs/bootstrap/blob/v5.1.3/scss/mixins/_breakpoints.scss < / p >

更新日期:2021-12-19

下面是一个更模块化的例子，使用LESS来模拟Bootstrap，而不导入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) {


}

或者简单的sas - compass:

@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 only screen和(max-width: 1200px) {}

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

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

@media only screen和(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) {}

使用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) {
}

根据其他用户的回答，我编写了这些自定义mixin，以便于使用:

减少输入

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

在我的例子中，你可以看到字体大小和背景颜色根据屏幕大小而变化

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

改进主响应:

你可以使用<link>标记的媒体属性(它支持媒体查询)来下载用户需要的代码。

<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">