響應式網站設計基本觀念(2)：CSS媒體查詢(CSS Media Queries)

Lucy’s cornerstone

Published in

狐狸的葡萄酒

4 min readApr 1, 2020

以下先介紹CSS的media屬性，才會了解CSS媒體查詢是如何運作的。

1. CSS的media屬性：

(1) 媒體類型(Media Types)：

媒體類型是指”將網頁輸出的媒體設備”。

在以前CSS2的時候，還沒有那麼多行動設備，只有電腦螢幕與印表機；當我要瀏覽網頁時字體會縮小，當我想印出網頁的時候字體會放大，這就是最初的media屬性。

寫在html中：優點是敘述直白，但是如果在html載入，會發出多個http請求，影響使用的方便性。

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> 
全部裝置適用<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />  
給螢幕的CSS media屬性<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />給印表機的CSS media屬性

寫在CSS中：優點是只需要呼叫一次CSS文件，字義易懂，所以比較推薦。

@media screen { font-size: 12px; }
給螢幕的media屬性@media print { font-size: 36px; }給印表機的media屬性

(2) 媒體查詢(Media Queries)

到了CSS3，各種行動化設備進入市場，有更多的尺寸格式需要fit使用者的需求。因此格式調整改用”條件”的方式去查詢。媒體查詢有兩種條件：媒體類型(Media Types)及媒體特徵(Media Feature)。

媒體特徵(Media Feature)是一個邊界示意範圍，告訴你此CSS格式的適用尺寸，一種CSS格式可以設很多個媒體特徵，彼此可以用and,or ,not來表示條件。

當條件為True，CSS格式就會繼續執行；False，CSS格式就會調整，直到滿足下一個True為止。

公式是： @media "媒體類型"(媒體特徵){文字圖片格式}@media (max-width: 600px) {...//styles}
類型沒寫，預設是all；意思是寬度小於600px時，適用此格式。@media screen and (max-width: 600px) {...//styles}
類型是"screen",是開發網頁時的通用格式。@media screen and (min-width: 600px) and (max-width: 1000px) {...//styles}
可以根據使用情況，增加"媒體特徵"供條件查詢。

2.行動優先

當執行行動優先的原則時，由於CSS是由上而下去讀取的，因此CSS Media Queries設定順序必須從小尺寸到大尺寸，這樣才會涵蓋到所有尺寸的設備。

@media screen and (min-width: 300px)  {...//styles}
@media screen and (min-width: 500px)  {...//styles}
@media screen and (min-width: 800px) {...//styles}

如果一份文件，有太多想引用的CSS格式，可以運用@import把你想要的media queries內容抄到文件的CSS中。媒體類型預設是all：

公式： @import url("css檔案")"媒體類型"@import url("brush.css") projection, tv;
該指令放入CSS中，即可套用brush.css的media queries@import url('styleCss.css') screen and (max-width: 670px);
該指令放入CSS中，即可套用styleCss.css的media queries

3. 在DevTools觀察CSS Media Queries

把游標移到藍色或橘色尺狀圖塊，就可以顯示出CSS邊界大小，點擊尺規就可以變化尺寸。