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

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

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

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

4、上的 retina 屏,一個(gè) iphone5的小小的屏幕 (iphone的屏幕是真小啊 ,他的 分辨率竟然達(dá)到了 1136*640,幾乎等于 一個(gè)筆記本的分辨率。你在這樣小的物理顯示界面打開(kāi)一個(gè)網(wǎng)頁(yè), 他用 1136的分辨率來(lái)顯示,結(jié)果就是所有元素小的可憐。在面對(duì)這種分辨率精細(xì)的終端,我們有另外一個(gè)條件查詢(xún)語(yǔ)句 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的查詢(xún), 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為了一些版本的兼容性,不得已寫(xiě)的長(zhǎng)了。bodyfont-size:24px;.box2background: url(d/20.png #ccc;background-size:50%;在像素比為 2的終端里這樣寫(xiě)的目的,就是讓他顯示的更容易識(shí)別,一般來(lái)說(shuō)顯示一張 1px 的背景圖 片,我們要準(zhǔn)

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

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