Twitter Bootstrap 3：如何使用媒体查询？

本文翻译自：Twitter Bootstrap 3: how to use media queries?

I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size. 我正在使用Bootstrap 3来构建响应式布局，我想根据屏幕大小调整一些字体大小。 How can I use media queries to make this kind of logic? 如何使用媒体查询来制作这种逻辑？

---

#1楼

参考：https://stackoom.com/question/1FJ8A/Twitter-Bootstrap-如何使用媒体查询

---

#2楼

Here are two examples. 这是两个例子。

Once the viewport becomes 700px wide or less make all h1 tags 20px. 一旦视口变为700px宽或更小，使所有h1标签为20px。

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

Make all the h1's 20px until the viewport reaches 700px or larger. 使所有h1的20px直到视口达到700px或更大。

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

Hope this helps :0) 希望这会有所帮助：0）

---

#3楼

Bootstrap 3 Bootstrap 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 Bootstrap 4

Here are the selectors used in BS4. 以下是BS4中使用的选择器。 There is no "lowest" setting in BS4 because "extra small" is the default. BS4中没有“最低”设置，因为“超小”是默认设置。 Ie you would first code the XS size and then have these media overrides afterwards. 即你首先编码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-02-11：从版本3.4.0开始，BS3信息仍然准确，新网格更新BS4，从4.3.0开始准确。

---

#4楼

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中删除。

---

#5楼

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

---

#6楼

If you're using LESS or SCSS/SASS and you're using a LESS/SCSS version of Bootstrap, you can use variables as well, provided you have access to them. 如果您正在使用LESS或SCSS / SASS并且您正在使用LESS / SCSS版本的Bootstrap，那么您也可以使用变量 ，前提是您可以访问它们。 A LESS translation of @full-decent's answer would be as follows: @ 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 */

There are also variables for @screen-sm-max and @screen-md-max , which are 1 pixel less than @screen-md-min and @screen-lg-min , respectively, typically for use with @media(max-width) . @screen-sm-max和@screen-md-max也有变量，分别比@screen-md-min和@screen-lg-min小1个像素，通常用于@media(max-width) 。

EDIT: If you're using SCSS/SASS, variables start with a $ instead of a @ , so it'd be $screen-xs-max etc. 编辑：如果你正在使用SCSS / SASS， 变量以$而不是@开头，所以它是$screen-xs-max等。