原創：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！