html5/css3響應式布局介紹及設計流程

標籤：trunk   number   頁面   tle   移動端   布局   響應式布局   元素   版本   

 html5/css3響應式布局介紹及設計流程，利用css3的media query媒體查詢功能。移動終端一般都是對css3支援比較好的進階瀏覽器不需要考慮響應式布局的媒體查詢media query相容問題 html5/css3響應式布局介紹

html5/css3響應式布局介紹及設計流程，利用css3的media query媒體查詢功能。移動終端一般都是對css3支援比較好的進階瀏覽器不需要考慮響應式布局的媒體查詢media query相容問題

一個普通的自適應顯示的三欄網頁，當你用不同的終端來查看這個頁面的時候，他會根據幾種終端來顯示不同的樣式，在電腦上是三列，在pad上應該也是 三列，在大屏手機上是三行，在螢幕小於320的手機上只顯示主要內容，隱藏掉了次要元素。（這裡關於響應式布局還有個比較好的訊息，就是拖動瀏覽器也可以 觸發判斷條件，測試的時候你不需要去找一堆手機，只要把自己的瀏覽器視窗縮小到一定尺寸就可以了。）

我們認識下media query屬性吧。

1. @media screen and (min-width: 320px) and (max-width : 479px)

就從這個條件陳述式開始介紹，media屬性後面跟著的是一個 screen 的媒體類型（上面說過的十種媒體類型之一）。然後用 and 關鍵字來串連條件（其他關鍵字還有 not， only，看字面大家能理解，就不多說。），然後括弧裡就是一個媒體查詢語句，稍微懂點css的同學都能看懂，這個條件陳述式意思是在大於320小於479 的解析度下所啟用的樣式表。

這個語句，就是響應式布局的基礎應用了。在判斷終端解析度大小之後，賦予不同的樣式進去，就像我們的例子裡

1. @media screen and (max-width : 320px){
2. body{...}
3. }
4. @media screen and (min-width: 800px) and (max-width: 1024px){
5. body{...}
6. }

至於要判斷多少種解析度，完全取決於你產品的需求，常見的解析度有手機，平板（注意這些終端是存在 橫屏 豎屏 區別的,這個下一篇裡提），案頭顯示器。自己為自己所面對的終端定製樣式。

一般大於960的顯示器都可以用預設樣式而不必在媒體查詢裡判斷了。有一種情況除外，就是高像素比的終端，比如 iphone4以上的retina屏，一個iphone5的小小的螢幕（iphone的螢幕是真小啊），他的解析度竟然達到了1136*640，幾乎等於 一個筆記本的解析度。你在這樣小的物理顯示介面開啟一個網頁，他用1136的解析度來顯示，結果就是所有元素小的可憐。

在面對這種解析度精細的終端，我們有另外一個條件查詢語句 device-pixel-ratio。

比如例子裡的

1. @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

就是判斷終端的像素比是2的話，所渲染的樣式。iphone4以上像素比是2，高解析度Andriod裝置像素比是1.5，例子裡只有像素比為2的查詢，1.5的或者其他比例方法一樣，前面用的是幾種瀏覽器的私人屬性，最後一種是通用屬性，

1. @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

等於

1. @media only screen and (min-device-pixel-ratio: 2)

為了一些版本的相容性，不得已寫的長了。

1. body{
2. font-size:24px;
3. }
4. .box2{
5. background: url(d/20.png) #ccc;
6. background-size:50%;
7. }

在像素比為2的終端裡這樣寫的目的，就是讓他顯示的更容易識別，一般來說顯示一張1px的背景圖片，我們要準備一張2px的，然後再background-size:50%這樣。1.5像素比同例。

比如上面的demo，如果你用iphone4以上的蘋果手機來看，中間的背景圖片應該是顯示“2.0像素比”。

這裡也暴露了響應式一個很大的缺點：需要多做若干背景圖（作為內容顯示的圖片暫時無視，彈性圖片與彈性字型，下次單獨寫一篇介紹博文介紹）。

對於media query的相容性，我想不是很重要，因為很少有終端內建IE9以下的瀏覽器。基本都是進階瀏覽器。如果特殊需要，可以下載一個相容的JS檔案

1. <!--[if lt IE 9]>
2. <scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
3. <![endif]-->

以條件注釋的方式加在檔案裡。

=========================================
 html5/css3響應式頁面的設計流程第一步：確定需要相容的裝置類型、螢幕尺寸

通過使用者研究，瞭解使用者使用的裝置分布情況，確定需要相容的裝置類型、螢幕尺寸。

裝置類型：包括行動裝置（手機、平板）和pc。對於行動裝置，設計和實現的時候注意增加手勢的功能。

螢幕尺寸：包括各種手機螢幕的尺寸（包括橫向和豎向）、各種平板的尺寸（包括橫向和豎向）、普通電腦螢幕和寬屏。

需要考慮的問題：

• 某個頁面進行響應式設計時其適用的尺寸範圍是哪些？比如，1688搜尋結果頁面，跨度可以從手機到寬屏，而1688首頁，由於結構過於複雜，想隨即轉移到手機上，不太現實，不如直接設計一個手機版的首頁。
• 結合使用者需求和實現成本，對適用的尺寸進行取捨。比如一些功能操作的頁面，使用者一般沒有在移動端進行操作的需求，沒有必要進行響應式設計。

第二步：製作線框原型

針對確定下來的幾個尺寸分別製作不同的線框原型，需要考慮清楚不同尺寸下，頁面的布局如何變化，內容尺寸如何縮放，功能、內容的刪減，甚至針對特殊的環境作特殊化的設計等。這個過程需要設計師和前端開發人員保持密切的溝通。

第三步：測試線框原型

將圖片匯入到相應的裝置進行一些簡單的測試，可協助我們儘早發現可訪問性、可讀性等方面存在的問題。

第四步：視覺設計

注意，行動裝置的螢幕像素密度與傳統電腦螢幕不一樣，在設計的時候需要保證內容文字的可讀性、控制項可點擊地區的面積等。

第五步：前端實現

與傳統的web開發相比，響應式設計的頁面由於頁面配置、內容尺寸發生了變化，所以最終的產出更有可能與設計稿出入較大，需要前端開發人員和設計師多溝通。

html5/css3響應式布局介紹及設計流程