原創：itsOli @前端一萬小時本文首發于公眾號「前端一萬小時」本文版權歸作者所有，未經授權，請勿轉載！本文節選自“語雀”私有付費專欄「前端一萬小時 | 從零基礎到輕松就業」

??????以下鏈接為本文最新勘誤篇章——《讓這些“展示”有更好的擴展性——媒體查詢》

1. 列舉你了解的 HTML5、CSS3 新特性？ 2. Canvas 和 SVG 有什么區別？

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

---

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

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

@

而 CSS3 的 Media Queries 的到來，可以讓我們針對不同的設備場景使用不同的 CSS。

1 常用的媒體類型

• all（所有），適用于所有設備。
• handheld（手持），用于手持設備。
• print（印刷），用于分頁材料以及打印預覽模式下在屏幕上的文檔視圖。
• projection（投影），用于投影演示文稿，例如投影儀。
• screen（屏幕），主要用于計算機屏幕。

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

@

2 CSS3 里的媒體查詢

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

@

另外，

@

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 方法引入

<

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

@

??注意：一般我們都是寫完一個樣式之后，再寫它對應的媒體查詢，而且要注意選擇器的權重。

5 面試題實例

?

答：
源碼及效果展示
HTML

<

CSS

body

---

后記： 本篇知識點不多，但每個頁面又基本上都會用，所以理解的基礎上根據實際選擇即可。

祝好，qdywxs ? you！

總結

以上是生活随笔為你收集整理的CSS如何设置高度为屏幕高度_（15）让这些“展示”有更好的扩展性——媒体查询 | CSS...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。