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等。