HEAD FIRST HTML & CSS學習筆記1

標籤：

一、指定媒體類型=指定顯示裝置的類型  P400

有兩種方式指定媒體類型：

a. 直接在<link>標籤中加屬性media，例：

<link href="print.css" type="text/css" rel="stylesheet" media="print">

b. 在CSS樣式表中加@media，例：

@media screen and (max-width:480px) {要應用的CSS樣式}

上例中，(max-width:480px)屬於媒體查詢部分，建立媒體查詢是為了更細緻地指定媒體類型

 

二、媒體查詢Media Queries的使用方法（此部分內容取自囂張的張大大的部落格）：

Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果。

兩種指定媒體類型的方式殊途同歸，這裡主要講在CSS樣式表中指定媒體類型

@media 媒體類型 and (媒體特性){你的樣式}

注意：a. 使用Media Queries必須要使用@media開頭，然後指定媒體類型（也可以稱為裝置類型），隨後是指定媒體特性（也可以稱之為裝置特性）。

        b. 媒體特性的書寫方式和樣式的書寫方式非常相似，主要分為兩個部分，第一個部分指的是媒體特性，第二部分為媒體特性所指定的值，而且這兩個部分之間使用冒號分隔。

        c. 媒體樣式例子：(max-width: 480px)

   d.與CSS屬性不同的是，媒體特性是通過min/max來表示大於等於或小於等於做為邏輯判斷，而不是使用小於（<）和大於（>）這樣的符號來判斷。


三、Media Queries在實際項目中常用的方式：

1. 最大寬度max-width

max-width 是媒體特性中最常用的一個特性，其意思是指媒體類型小於或等於指定的寬度時，樣式生效。如：

@media screen and (max-width:480px){ .ads {   display:none;  }}

上面表示的是：當螢幕小於或等於480px時,頁面中的廣告區塊（.ads）都將被隱藏。

2.最小寬度min-width

min-width 與 max-width 相反，指的是媒體類型大於或等於指定寬度時，樣式生效。如：

@media screen and (min-width:900px){.wrapper{width: 980px;}}

上面表示的是：當螢幕大於或等於900px時，容器“.wrapper”的寬度為980px。

3.使用多個媒體特性

Media Queries可以使用關鍵詞 and 將多個媒體特性結合在一起。如：

@media screen and (min-width:600px) and (max-width:900px){  body {background-color:#f5f5f5;}}
上面表示的是：當螢幕在600px~900px之間時，body的背景色渲染為“#f5f5f5”。

4.裝置螢幕的輸出寬度Device Width

在智慧型裝置上，例如iPhone、iPad等，還可以根據螢幕裝置的尺寸來設定相應的樣式（或者調用相應的樣式檔案）。

PS：min-width和max-width是根據螢幕的大小來設定相應的樣式

同樣的，對於螢幕裝置可以使用“min/max”對應參數，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代碼指的是“iphone.css”樣式適用於最大寬度為480px的裝置，這裡的“max-device-width”所指的是裝置的實際解析度，也就是指可視面積解析度。

5. not關鍵詞

使用關鍵詞“not”是用來排除某種媒體類型，也就是用來排除符合運算式的裝置。

換句話說，not關鍵詞表示對後面的運算式執行取反操作，如：

@media not print and (max-width: 1200px){樣式代碼}

上面代碼錶示的是：樣式代碼將被使用在除列印裝置和裝置寬度小於1200px的所有裝置中。

6.only關鍵詞

only用來指定某種特定的媒體類型，可以用來排除不支援媒體查詢的瀏覽器。

其實我不是很懂，如果瀏覽器不支援，肯定會直接忽略，為什麼還要特意做這種排除

only很多時候是用來對那些不支援Media Query媒體查詢但卻支援Media Type媒體類型的裝置隱藏樣式表的。

主要有以下幾種情況：

a. 支援媒體特性的裝置，正常調用樣式，此時就當only不存在；

b. 不支援媒體特性但又支援媒體類型的裝置，這樣就會不讀樣式，因為其先會讀取only而不是screen；

c. 不支援Media Queries的瀏覽器，不論是否支援only，樣式都不會被採用。如：

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

 

注意：1.在Media Query中如果沒有明確指定Media Type，那麼其預設為all，如：

<link rel="stylesheet" media="(min-width:700px) and (max-width:900px)" href="mediu.css" />

        2. 在樣式中，可以使用多條語句來將同一個樣式應用於不同的媒體類型和媒體特性中，指定方式如下所示。

<link rel="stylesheet" type="text/css" href="style.css" 
media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代碼中style.css樣式被用在寬度小於或等於480px的手持功能上，或者被用於螢幕寬度大於或等於960px的裝置上。

 

到目前為止，CSS3 Media Queries得到了眾多瀏覽器支援，除了IE6-8瀏覽器不支援之外，在所有現代瀏覽器中都可以完美支援。

還有一個與眾不同的是，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加首碼。（這句沒懂，以後再來理解）

HEAD FIRST HTML & CSS學習筆記1