CSS Twitter Bootstrap 3：如何使用媒体查询？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18424798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 3: how to use media queries?
提问by Rui
I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size. How can I use media queries to make this kind of logic?
我正在使用 Bootstrap 3 构建响应式布局，我想根据屏幕大小调整一些字体大小。如何使用媒体查询来制作这种逻辑？
回答by William Entriken
Bootstrap 3
引导程序 3
Here are the selectors used in BS3, if you want to stay consistent:
如果您想保持一致，以下是 BS3 中使用的选择器：
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Note: FYI, this may be useful for debugging:
注意：仅供参考，这可能对调试有用：
<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>
Bootstrap 4
引导程序 4
Here are the selectors used in BS4. There is no "lowest" setting in BS4 because "extra small" is the default. I.e. you would first code the XS size and then have these media overrides afterwards.
以下是 BS4 中使用的选择器。BS4 中没有“最低”设置，因为“超小”是默认设置。即，您将首先编码 XS 大小，然后再进行这些媒体覆盖。
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Update 2019-02-11: BS3 info is still accurate as of version 3.4.0, updated BS4 for new grid, accurate as of 4.3.0.
2019 年 2 月 11 日更新：BS3 信息从 3.4.0 版本开始仍然准确，更新了新网格的 BS4，从 4.3.0 开始准确。
回答by Chris Clower
Based on bisio's answer and the Bootstrap 3 code, I was able to come up with a more accurate answer for anyone just looking to copy and paste the complete media query set into their stylesheet:
根据 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) {
}
回答by carpeliam
If you're using LESS or SCSS/SASS and you're using a LESS/SCSS version of Bootstrap, you can use variablesas well, provided you have access to them. A LESS translation of @full-decent's answer would be as follows:
如果您使用的是 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 */
There are also variables for @screen-sm-maxand @screen-md-max, which are 1 pixel less than @screen-md-minand @screen-lg-min, respectively, typically for use with @media(max-width).
还有用于变量@screen-sm-max和@screen-md-max，这是1个像素小于@screen-md-min和@screen-lg-min分别，典型地，用于在使用@media(max-width)。
EDIT: If you're using SCSS/SASS, variablesstart with a $instead of a @, so it'd be $screen-xs-maxetc.
编辑：如果您使用 SCSS/SASS，变量以 a$而不是 a开头@，所以它会是$screen-xs-max等。
回答by shlomia
These are the values from Bootstrap3:
这些是来自 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){}
回答by Jeffpowrs
Here are two examples.
这里有两个例子。
Once the viewport becomes 700px wide or less make all h1 tags 20px.
一旦视口宽度变为 700 像素或更小，使所有 h1 标签变为 20 像素。
@media screen and ( max-width: 700px ) {
h1 {
font-size: 20px;
}
}
Make all the h1's 20px until the viewport reaches 700px or larger.
使所有 h1 为 20 像素，直到视口达到 700 像素或更大。
@media screen and ( min-width: 700px ) {
h1 {
font-size: 20px;
}
}
Hope this helps :0)
希望这有帮助:0)
回答by internet-nico
Here is a more modular example using LESS to mimic Bootstrap without importing the less files.
这是一个更模块化的示例，使用 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) {
}
回答by damd
Based on the other users' answers, I wrote these custom mixins for easier usage:
根据其他用户的回答，我编写了这些自定义 mixin 以便于使用：
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(); } }
Example usage
示例用法
body {
.when-lg({
background-color: red;
});
}
SCSS input
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; } }
Example usage:
用法示例：
body {
@include when-md {
background-color: red;
}
}
Output
输出
@media (min-width:1200px) {
body {
background-color: red;
}
}
回答by Suleman C
As of Bootstrap v3.3.6 the following media queries are used which corresponds with the documentation that outlines the responsive classes that are available (http://getbootstrap.com/css/#responsive-utilities).
自 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) {}
Media queries extracted from the Bootstrap GitHub repository from the following less files:-
从 Bootstrap GitHub 存储库中提取的媒体查询来自以下 less 文件：-
https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.lesshttps://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less
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
回答by user956584
Or simple Sass-Compass:
或者简单的 Sass-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;
}
}
Example:
例子：
#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;
}
}
回答by Joshua Watson
keep in mind that avoiding text scaling is the main reason responsive layouts exist. the entire logic behind responsive sites is to create functional layouts that effectively display your content so its easily readable and usable on multiple screen sizes.
请记住，避免文本缩放是响应式布局存在的主要原因。响应式网站背后的整个逻辑是创建功能布局，以有效地显示您的内容，使其在多种屏幕尺寸上易于阅读和使用。
Although It is necessary to scale text in some cases, be careful not to miniaturise your site and miss the point.
尽管在某些情况下需要缩放文本，但请注意不要将站点小型化而错过重点。
heres an example anyway.
无论如何，这里有一个例子。
@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}
}
Also keep in mind the 480 viewport has been dropped in bootstrap 3.
还要记住，480 视口已在引导程序 3 中删除。
