html5css3響應(yīng)式布局介紹

1、html5/css3響應(yīng)式布局介紹html5/css3響應(yīng)式布局介紹及設(shè)計流程,利用 css3的 media query媒體查詢功能。移動終端一般都 是對 css3支持比較好的高級瀏覽器不需要考慮響應(yīng)式布局的媒體查詢 media query兼容問題一個普通的自適應(yīng)顯示的三欄網(wǎng)頁,當你用不同的終端來查看這個頁面的時候,他會根據(jù)幾種終端來 顯示不同的樣式,在電腦上是三列,在 pad 上應(yīng)該也是 三列,在大屏手機上是三行,在屏幕小于 320的手 機上只顯示主要內(nèi)容, 隱藏掉了次要元素。 (這里關(guān)于響應(yīng)式布局還有個比較好的消息, 就是拖動瀏覽器也 可以 觸發(fā)判斷條件, 測試的時候你不需要去找一堆手機,

2、 只要把自己的瀏覽器窗口縮小到一定尺寸就可以 了。 我們認識下 media query屬性吧。media screen and (min-width: 320px and (max-width : 479px就從這個條件語句開始介紹, media 屬性后面跟著的是一個 screen 的媒體類型 (上面說過的十種媒體 類型之一 。 然后用 and 關(guān)鍵字來連接條件 (其他關(guān)鍵字還有 not, only, 看字面大家能理解, 就不多說。 , 然后括號里就是一個媒體查詢語句,稍微懂點 css 的同學都能看懂,這個條件語句意思是在大于 320小于 479 的分辨率下所激活的樣式表。這個語句,就是響應(yīng)式

3、布局的基礎(chǔ)應(yīng)用了。在判斷終端分辨率大小之后,賦予不同的樣式進去,就像 我們的例子里media screen and (max-width : 320pxbody.media screen and (min-width: 800px and (max-width: 1024pxbody.至于要判斷多少種分辨率, 完全取決于你產(chǎn)品的需求,常見的分辨率有手機, 平板 (注意這些終端是存 在 橫屏 豎屏 區(qū)別的 , 這個下一篇里提 ,桌面顯示器。自己為自己所面對的終端定制樣式。一般大于 960的顯示器都可以用默認樣式而不必在媒體查詢里判斷了。有一種情況除外,就是高像素 比的終端,比如 iphone4以

4、上的 retina 屏,一個 iphone5的小小的屏幕 (iphone的屏幕是真小啊 ,他的 分辨率竟然達到了 1136*640,幾乎等于 一個筆記本的分辨率。你在這樣小的物理顯示界面打開一個網(wǎng)頁, 他用 1136的分辨率來顯示,結(jié)果就是所有元素小的可憐。在面對這種分辨率精細的終端,我們有另外一個條件查詢語句 device-pixel-ratio。比如例子里的media only screen and (-moz-min-device-pixel-ratio: 2, only screen and(-o-min-device-pixel-ratio: 2/1, only screen and

5、 (-webkit-min-device-pixel-ratio: 2, only screen and (min-device-pixel-ratio: 2就是判斷終端的像素比是 2的話, 所渲染的樣式。 iphone4以上像素比是 2, 高分辨率 Andriod 設(shè)備像 素比是 1.5, 例子里只有像素比為 2的查詢, 1.5的或者其他比例方法一樣,前面用的是幾種瀏覽器的私有 屬性,最后一種是通用屬性,media only screen and (-moz-min-device-pixel-ratio: 2, only screen and(-o-min-device-pixel-rati

6、o: 2/1, only screen and (-webkit-min-device-pixel-ratio: 2, only screen and (min-device-pixel-ratio: 2等于media only screen and (min-device-pixel-ratio: 2為了一些版本的兼容性,不得已寫的長了。bodyfont-size:24px;.box2background: url(d/20.png #ccc;background-size:50%;在像素比為 2的終端里這樣寫的目的,就是讓他顯示的更容易識別,一般來說顯示一張 1px 的背景圖 片,我們要準

7、備一張 2px 的,然后再 background-size:50%這樣。 1.5像素比同例。比如上面的 demo , 如果你用 iphone4以上的蘋果手機來看, 中間的背景圖片應(yīng)該是顯示“2.0像素比”。這里也暴露了響應(yīng)式一個很大的缺點:需要多做若干背景圖 (作為內(nèi)容顯示的圖片暫時無視, 彈性圖片 與彈性字體,下次單獨寫一篇介紹博文介紹 。對于 media query的兼容性,我想不是很重要,因為很少有終端自帶 IE9以下的瀏覽器?；径际歉?級瀏覽器。如果特殊需要,可以下載一個兼容的 JS 文件以條件注釋的方式加在文件里。=html5/css3響應(yīng)式頁面的設(shè)計流程第一步:確定需要兼容的設(shè)備

8、類型、屏幕尺寸通過用戶研究,了解用戶使用的設(shè)備分布情況,確定需要兼容的設(shè)備類型、屏幕尺寸。設(shè)備類型:包括移動設(shè)備 (手機、 平板 和 pc 。 對于移動設(shè)備, 設(shè)計和實現(xiàn)的時候注意增加手勢的功能。屏幕尺寸:包括各種手機屏幕的尺寸 (包括橫向和豎向 、各種平板的尺寸 (包括橫向和豎向 、普通電 腦屏幕和寬屏。需要考慮的問題:某個頁面進行響應(yīng)式設(shè)計時其適用的尺寸范圍是哪些 ? 比如, 1688搜索結(jié)果頁面,跨度可以從手機到 寬屏,而 1688首頁,由于結(jié)構(gòu)過于復(fù)雜,想直接遷移到手機上,不太現(xiàn)實,不如直接設(shè)計一個手機版的首 頁。結(jié)合用戶需求和實現(xiàn)成本,對適用的尺寸進行取舍。比如一些功能操作的頁面,用戶一般沒有在移動 端進行操作的需求,沒有必要進行響應(yīng)式設(shè)計。第二步:制作線框原型針對確定下來的幾個尺寸分別制作不同的線框原型, 需要考慮清楚不同尺寸下, 頁面的布局如何變化, 內(nèi)容尺寸如何縮放,功能、內(nèi)容的刪減,甚至針對特殊的環(huán)境作特殊化的設(shè)計等。這個過程需要設(shè)計師和 前端開發(fā)人員保持密切的溝通。第三步:測試線框原型將圖片導(dǎo)入到相應(yīng)的設(shè)備進行一些簡單的測試,可幫助我們盡早發(fā)現(xiàn)可訪問性、可讀性等方面存在的 問題。第四步:視覺設(shè)計注意,移