響應(yīng)式網(wǎng)頁的話題隨著如今移動(dòng)互聯(lián)網(wǎng)的盛行又被推到了很重要的位置，有相關(guān)人士預(yù)計(jì)，移動(dòng)互聯(lián)網(wǎng)的數(shù)據(jù)流量將在2015年超越桌面端的流量。

你一定聽說過，我們目前正處在“后PC時(shí)代”，這對(duì)于前端開發(fā)人員來說，意味著應(yīng)該處理一些用戶行為上的改變，由此步入一個(gè)響應(yīng)式與自適應(yīng)設(shè)計(jì)技術(shù)統(tǒng)治的時(shí)代。這其中的關(guān)鍵點(diǎn)在于web的統(tǒng)一化，也就是說在合理的條件下，無論用戶使用任何設(shè)備，都應(yīng)該傳達(dá)相同的內(nèi)容信息與服務(wù)。

What？

2010年，Ethan Marcotte提出了“自適應(yīng)網(wǎng)頁設(shè)計(jì)”（ResponsiveWeb Design）這個(gè)名詞，指可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)。舉個(gè)例子：

（1）當(dāng)屏幕寬度大于1300像素

（2）當(dāng)屏幕寬度在600像素到1300像素之間

（3）當(dāng)屏幕寬度在400像素到600像素之間

（4）當(dāng)屏幕寬度在400像素以下

響應(yīng)式的核心優(yōu)勢在于設(shè)計(jì)者可以為所有設(shè)備使用同一種模板，只需要用CSS來定制內(nèi)容在各種大小屏幕上的呈現(xiàn)方式。

響應(yīng)式網(wǎng)頁的組成關(guān)鍵

響應(yīng)式頁面的實(shí)現(xiàn)其實(shí)并不算困難，用到的也都是大家比較熟悉的一些技術(shù)。

（1）Media Query

Media Query的主要作用是根據(jù)不同的分辨率去調(diào)整一些不同的樣式。由于目前主流的移動(dòng)設(shè)備都基于ios和Android，這兩者的自帶瀏覽器都是webkit內(nèi)核，因此我們可以使用viewport屬性和Media Query技術(shù)實(shí)現(xiàn)響應(yīng)式網(wǎng)頁。通過這一方法，我們能實(shí)現(xiàn)讓基準(zhǔn)字號(hào)font-size在不同分辨率下顯示不一樣的內(nèi)容。

（2）Fluid grid

Fluid grid也稱流體布局，就是在PC端實(shí)現(xiàn)的基礎(chǔ)上將一些元素的狂傲由固定調(diào)整為彈性制的百分比或是字體比例等。使用Fluid grid的網(wǎng)站能夠根據(jù)屏幕寬度自動(dòng)調(diào)整頁面中每列的寬度，從而保證頁面始終處于完整展現(xiàn)的狀態(tài)，并且實(shí)現(xiàn)原有的基本功能。

（3）Flex box

Flex box是CSS3新添加的一種模型屬性，它的出現(xiàn)有力的打破了我們常常使用的浮動(dòng)布局、實(shí)現(xiàn)垂直等高、水平均分、按比例劃分，可以實(shí)現(xiàn)許多我們之前做不到的自適應(yīng)布局。如果你希望網(wǎng)站能以webapp的外觀呈現(xiàn)在手機(jī)用戶面前，那么，F(xiàn)lex box就是個(gè)不錯(cuò)的方式。Flex box和APP的結(jié)構(gòu)很類似，頭部底部全部固定，而中間部分的高度實(shí)現(xiàn)自適應(yīng)。

另外，與傳統(tǒng)的web開發(fā)相比，由于響應(yīng)式設(shè)計(jì)的頁面布局、內(nèi)容尺寸都發(fā)生了一些變化，所以，最終的成品極有可能與設(shè)計(jì)稿出入較大，還需前端開發(fā)人員和設(shè)計(jì)師多溝通，以免造成不必要的時(shí)間浪費(fèi)。

響應(yīng)式web設(shè)計(jì)的優(yōu)化

在響應(yīng)式網(wǎng)頁的設(shè)計(jì)過程中，其中也會(huì)涉及到一些用戶體驗(yàn)方面的問題和弊端，需要進(jìn)一步的優(yōu)化。

(1)減輕Javascript庫負(fù)載

對(duì)于移動(dòng)端來說，jQuery表現(xiàn)的太過厚重，而現(xiàn)在針對(duì)移動(dòng)端的狀態(tài)來說，有jQuery Mobile、YUI、XUI等可供選擇的框架。

（2）減少HTTP請求次數(shù)

移動(dòng)端相比較PC端有一個(gè)特殊的限制需要考慮到，就是用戶的網(wǎng)絡(luò)流量是有限的。這時(shí)候針對(duì)這些頁面內(nèi)部的部分操作，可以使用Ajax異步請求來完成，針對(duì)短期內(nèi)不會(huì)變化的一些數(shù)據(jù)，可以使用服務(wù)器端緩存、前端緩存等機(jī)制來保存這些數(shù)據(jù)，這樣可以減少用戶一定的數(shù)據(jù)請求量。

（3）Javascript和CSS需要盡量壓縮

把頁面中使用的Javascript和CSS進(jìn)行壓縮之后會(huì)有效地減少頁面大小。

（4）用CDN管理頁面資源

CDN的即內(nèi)容分發(fā)網(wǎng)絡(luò)，意在盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的環(huán)節(jié)，使內(nèi)容傳輸?shù)母€(wěn)定。

（5）列表圖片實(shí)現(xiàn)“懶”加載

移動(dòng)終端設(shè)備因?yàn)槠聊淮笮∮邢蓿瑳]有必要將全屏中的圖片一次性加載完成，網(wǎng)頁加載的同時(shí)，我們可以選擇逐個(gè)加載，當(dāng)用戶進(jìn)行滑動(dòng)頁面的時(shí)候，再繼續(xù)加載圖片。

（6）圖片顯示的優(yōu)化處理

根據(jù)用戶設(shè)備的分辨率來加載不同分辨率下的不同圖片，這樣既能給不同終端的用戶一個(gè)很好的視覺體驗(yàn)，又不會(huì)白白浪費(fèi)用戶的網(wǎng)絡(luò)數(shù)據(jù)流量。

網(wǎng)站標(biāo)題：身為現(xiàn)代前端人員,不懂響應(yīng)式怎么行?
標(biāo)題網(wǎng)址：http://jinyejixie.com/news46/167296.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、軟件開發(fā)、電子商務(wù)、微信公眾號(hào)、定制開發(fā)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)