（15）讓這些「展現」有更好的擴展性——媒體查詢 | CSS

原創：itsOli  @前端一萬小時

本文首發於公衆號「前端一萬小時」

本文版權歸做者全部，未經受權，請勿轉載！

本文節選自「語雀」私有付費專欄「前端一萬小時 | 從零基礎到輕鬆就業」
複製代碼

1. 列舉你瞭解的 HTML五、CSS3 新特性？
2. Canvas 和 SVG 有什麼區別？
複製代碼

🙋上方面試題「參考答案詳解」，請點擊此處查看獲取方式！

---

前言： 實際上在很早以前，CSS 就支持媒體查詢了。

例如，頁面有些部分須要在打印的時候隱藏或者變大，這時候可使用 media 使某些 style 只在打印的時候生效。

@media print { /* 適用於印刷的樣式 */ }
複製代碼

而 CSS3 的 Media Queries 的到來，可讓咱們針對不一樣的設備場景使用不一樣的 CSS。

1 經常使用的媒體類型

• all（全部），適用於全部設備。

• handheld（手持），用於手持設備。

• print（印刷），用於分頁材料以及打印預覽模式下在屏幕上的文檔視圖。

• projection（投影），用於投影演示文稿，例如投影儀。

• screen（屏幕），主要用於計算機屏幕。

在使用的時候能夠在樣式表直接書寫 @media 指令 + 空格 + 媒體類型（多個用逗號隔開）：

@media print {
  body {font-size: 10pt;}
}
@media screen {
  body {font-size: 13px;}
}
@media screen, print {
  body {line-height: 1.2;}
}
複製代碼

2 CSS3 裏的媒體查詢

CSS2 的媒體類型應用場景極爲有限，CSS3 大大拓展了這一能力。

@media screen and (max-width: 990px) {
  .container {
    background: orange;
  }
}
/* 🚀通常來講咱們寫媒體查詢就用這句話就好了，這是最經常使用的。 */
/* 意思就是：當咱們的瀏覽器屏幕（screen）的最大寬度爲 990px 的時候， 如下的樣式生效。若是屏幕不是 ≤990px，那麼如下樣式不生效。 */
複製代碼

💡另外，

@media (min-width: 700px) and (orientation: landscape) { ... }

/* 🚀這個是指： 當它最小寬度是 700px，而且它的 orientation 是 landscape（橫屏）。 orientation 這個屬性表示你的瀏覽器是橫屏（landscape）的仍是豎屏（portrait）的， 好比說在手機上，瀏覽器分爲橫屏和豎屏，那這樣的話， 萬一用戶的瀏覽器看着是橫屏的，那你可能給他一些提示。 好比你作了一些小遊戲，這個小遊戲不建議橫屏去玩， 可是用戶的瀏覽器本身能夠去設置讓它去旋轉，那旋轉完成以後，東西都放不下了。 因此你能夠給他一個提示，若是檢測到它是橫屏，你可讓這段 CSS 生效， 那這段 CSS 可能就是一段隱藏的話，說「你瀏覽器要垂直起來去玩咱們的遊戲」。 那這樣的話，咱們不須要使用任何 JS 就能夠實現這個效果了。 */
複製代碼

3 經常使用的 media 屬性

width：瀏覽器寬度
height：瀏覽器高度
device-width：設備屏幕分辨率的寬度值
device-height：設備屏幕分辨率的高度值
orientation：瀏覽器窗口的方向縱向仍是橫向，當窗口的高度值大於等於寬度時該特性值爲 portrait，不然爲 landscape。
aspect-ratio：比例值，瀏覽器的縱橫比。
device-aspect-ratio：比例值，屏幕的縱橫比。
color：設備使用多少位的顏色值，若是不是彩色設備，值爲 0。
color-index：色彩表的色彩數
monochrome：單色幀緩衝器每一個像素的字節
resolution：分辨率值，設備分辨率值。
scan：電視機類型設備掃描方式，progressive 或 interlace。
grid：只能指定兩個值 0 或 1，是否基於柵格的設備。
複製代碼

4 如何引入 media

有兩種經常使用的引入方式：

4.1 link 方法引入

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">
複製代碼

4.2 @media 引入（這個最經常使用）

@media screen and (min-width: 600px) and (max-width: 800px) {
  選擇器 {
    屬性: 屬性值;
  }
}
複製代碼

❗️注意：通常咱們都是寫完一個樣式以後，再寫它對應的媒體查詢，並且要注意選擇器的權重。

5 面試題實例

❓

答：
🔗源碼及效果展現
HTML

<div id="header"></div>

<div id="content">
  <div id="left-content"></div>
  <div id="right-content"></div>
</div>
複製代碼

CSS

body {
  margin: 0;
}

#header {
  width: 100%;
  height: 200px;
  background-color: #33ccff;
}

#left-content {
  float: left;
  width: 100px;
  height: 1000px;
  background-color: #ffcc99;
}

#right-content {
  margin-left: 100px;
  width: 100%;
  height: 1000px;
  background-color: #823384;
}


/* 🚀當屏幕 <= 700px 時，要及時覆蓋上面的樣式。 */
@media (max-width: 700px) {

  #header {
    width: 100%;
    height: 50px;
    background-color: #33ccff;
  }

  #left-content {
    width: 0;
  }

  #right-content {
    width: 100%;
    margin-left: 0;
    background-color: #823384;
  }
}
複製代碼

---

後記： 本篇知識點很少，但每一個頁面又基本上都會用，因此理解的基礎上根據實際選擇便可。

祝好，qdywxs ♥ you！