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

}

改进主响应:

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

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

这样，浏览器将下载所有CSS资源，而不考虑介质属性。 区别在于，如果media属性的media-query被赋值为false，那么.css文件及其内容将不会被渲染阻塞。

因此，建议在<link>标签中使用media属性，可以保证更好的用户体验。

在这里你可以阅读谷歌关于这个问题的文章https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

一些工具，将帮助您自动分离您的css代码在不同的文件根据您的媒体查询

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

这里有两个例子。

一旦视口变成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;
  }
}

希望这能有所帮助:

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

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

引导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中没有“最低”设置，因为“特小”是默认设置。也就是说，你会首先编码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的信息仍然准确。