《HTML5觸摸界面設計與開發》——2.5 響應式的CSS

本節書摘來自異步社群《html5觸摸界面設計與開發》一書中的第2章，第2.5節,作者： 【美】stephen woods 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

在本書的配套網站，touch-interfaces.com上，你可以下載下傳兩個css檔案：

eric meyer的reset.css檔案。裡面有幾個用于“重置”的css樣式。我強烈推薦使用它，因為從“重置”後完全清潔的環境開始，要優于不停地嘗試修改相容浏覽器預設的樣式。

樣式表（birds.css）是加州鳥類網站專有的。birds.css由桌面版樣式開始。你可能會認出這是一個非常簡單的兩欄流動布局。桌面版的内容區域是流動的，而包含導航按鈕的側邊欄是固定的。

代碼清單 2.3展示了這些基本的樣式。

你可能會注意到，海鷗圖像設定的max-width為100%，而封閉的容器（.hero-shot）具有相對寬度1。這是建立所謂響應式圖像的最簡單方式。也就是說，圖像會自動按比例縮放到容器（即.hero-shot）的寬度。在這種情況下圖像的寬度總是文本塊的寬度的一半。

這種響應式圖像技術有一個重大的缺點：使用者的裝置肯定要下載下傳多餘的位元組。在下一章中，我們将重新審視圖像的問題。

2.5.1　建立分界點

正如前面提到的，我們将在加州鳥類網站的移動版和桌面版中使用相同的html标記。設計上是基于這一點的，布局和設計都會調整，以适應使用者的裝置的大小。為此，我們可以建立分界點：寬度的像素值不同會觸發樣式的更改，來适應不同寬度的螢幕。對于加州鳥類網站，我們将建立兩個分界點：平闆電腦為800px，手機為480px。

也就是說，如果螢幕寬度是801px或以上，我們将應用樣式表中的預設樣式。我們将為螢幕寬度在481px到800px之間的平闆電腦建立特殊的樣式，為螢幕寬度為480px或更窄的手機建立額外的樣式。

如果你以前從未這樣做過，改變樣式以适應螢幕寬度的想法聽起來很可怕。值得慶幸的是，媒體查詢（media queries）使人們可以創造出一個能自适應的樣式，而不必使用javascript。

媒體查詢

由于css2已被廣泛的支援，開發者已經能夠通過在link标簽上設定不同的媒體查詢值，來為不同的多媒體裝置提供不同的樣式表。通常情況下這個值都被用于規定一個單獨的“列印”樣式表，例如：

css3提供了更強大的文法，讓你可以根據更多的條件過濾樣式表，而不是隻能根據媒體類型來過濾。媒體查詢由一個媒介類型和其他表達式組成。解析後，媒體查詢最終的結果是真或假。如果為真，則應用樣式表。

媒體查詢可以由一個布爾運算符開始。用“not”開始的話，會将字段最後解析出的結果取反，就像在javascript中使用“!”一樣。最常見的，你可以用only操作符來開始。由于舊的浏覽器無法解析only操作符，就可以有效地在舊浏覽器上屏蔽掉隻應用于現代浏覽器的樣式表。

接下來就是媒體類型了。在css 2.1規範中，有十個媒體類型，但隻有print和screen被各浏覽器廣泛支援。在媒體類型後面，你可以指定一個表達式。對于加州鳥類網站，我們将根據螢幕寬度來改變樣式。寬度特征可以采用任何有效的css機關（用任何css機關來指定）來達到過濾的目的。

例如，下面這條規則限制隻有比較窄的螢幕才可應用該樣式表：

下面這條規則限制隻有比較寬的螢幕才可應用該樣式表：

對于加州鳥類網站，我們用媒體查詢來定義不同分支。是以，有三個樣式表：

這裡的像素值基于浏覽器的報告。例如，在高清屏iphone的垂直方向上，就媒體查詢而言，寬度傳回的是320，而不考慮螢幕上的實際實體像素。

媒體查詢真正偉大之處在于，我們不僅能通過外部的媒體屬性使用它，還可以在樣式表内部中通過@media指令使用它。

這個文法與媒體查詢參數的文法是相同的。@media指令在大括号之間建立了一塊區域。括号内的css隻在規則傳回true時被應用，否則浏覽器将不理會裡面的css。

2.5.2　建立額外樣式

對于加州鳥類網站，我們會為寬度800px的浏覽器和寬度480px的浏覽器制作額外的樣式。設計師又為平闆電腦創造了另一個樣式圖，将導航移動到了頂部中間，以留出更多空間給正文。否則，樣式應該是一樣的（圖2.6）。

https://yqfile.alicdn.com/84db660fe32c72a4a64884f78ee3967a420af9e7.png" >

因為側邊欄最先出現在dom樹中，我們隻需通過給它設定相對位置（postion:relative）和自動寬度（width:auto）就可以将它放回檔案流。然後就可以給container少許内邊距（padding），如代碼清單2.4所示。

桌面使用者可以改變他的浏覽器的大小，當桌面使用者調整浏覽器大小時，會發現随着調整到不同的寬度，可能會看到應用于手機和平闆電腦的樣式。如果你想讓這些樣式隻适用于裝置的實體寬度，可以使用max-device-width 或 min-device-width屬性來設定。

正如你所看到的，樣式通常伴随着媒體查詢。手機版的樣式如圖2.2所示，它需要一個稍微不同的布局。代碼清單2.5列出了手機版的樣式。

完整的代碼和代碼清單2.5都可以在網站上找到。如果你在桌面裝置上檢視這個頁面，你會發現當你調整浏覽器視窗大小時，樣式會發生變化。