2022-06-10 分類: 響應式網(wǎng)站
響應式網(wǎng)頁的話題隨著如今移動互聯(lián)網(wǎng)的盛行又被推到了很重要的位置,有相關(guān)人士預計,移動互聯(lián)網(wǎng)的數(shù)據(jù)流量將在2015年超越桌面端的流量。
你一定聽說過,我們目前正處在“后PC時代”,這對于前端開發(fā)人員來說,意味著應該處理一些用戶行為上的改變,由此步入一個響應式與自適應設(shè)計技術(shù)統(tǒng)治的時代。這其中的關(guān)鍵點在于web的統(tǒng)一化,也就是說在合理的條件下,無論用戶使用任何設(shè)備,都應該傳達相同的內(nèi)容信息與服務。
2010年,Ethan Marcotte提出了“自適應網(wǎng)頁設(shè)計”(ResponsiveWeb Design)這個名詞,指可以自動識別屏幕寬度、并做出相應調(diào)整的網(wǎng)頁設(shè)計。舉個例子:
(1)當屏幕寬度大于1300像素
(2)當屏幕寬度在600像素到1300像素之間
(3)當屏幕寬度在400像素到600像素之間
(4)當屏幕寬度在400像素以下
響應式的核心優(yōu)勢在于設(shè)計者可以為所有設(shè)備使用同一種模板,只需要用CSS來定制內(nèi)容在各種大小屏幕上的呈現(xiàn)方式。
響應式頁面的實現(xiàn)其實并不算困難,用到的也都是大家比較熟悉的一些技術(shù)。
(1)Media Query
Media Query的主要作用是根據(jù)不同的分辨率去調(diào)整一些不同的樣式。響應式網(wǎng)站由于目前主流的移動設(shè)備都基于ios和Android,這兩者的自帶瀏覽器都是webkit內(nèi)核,因此我們可以使用viewport屬性和Media Query技術(shù)實現(xiàn)響應式網(wǎng)頁。通過這一方法,我們能實現(xiàn)讓基準字號font-size在不同分辨率下顯示不一樣的內(nèi)容。
(2)Fluid grid
Fluid grid也稱流體布局,就是在PC端實現(xiàn)的基礎(chǔ)上將一些元素的狂傲由固定調(diào)整為彈性制的百分比或是字體比例等。使用Fluid grid的網(wǎng)站能夠根據(jù)屏幕寬度自動調(diào)整頁面中每列的寬度,從而保證頁面始終處于完整展現(xiàn)的狀態(tài),并且實現(xiàn)原有的基本功能。
(3)Flex box
Flex box是CSS3新添加的一種模型屬性,它的出現(xiàn)有力的打破了我們常常使用的浮動布局、實現(xiàn)垂直等高、水平均分、按比例劃分,可以實現(xiàn)許多我們之前做不到的自適應布局。如果你希望網(wǎng)站能以webapp的外觀呈現(xiàn)在手機用戶面前,那么,F(xiàn)lex box就是個不錯的方式。Flex box和APP的結(jié)構(gòu)很類似,頭部底部全部固定,而中間部分的高度實現(xiàn)自適應。
另外,與傳統(tǒng)的web開發(fā)相比,由于響應式設(shè)計的頁面布局、成都響應式網(wǎng)站內(nèi)容尺寸都發(fā)生了一些變化,所以,最終的成品極有可能與設(shè)計稿出入較大,還需前端開發(fā)人員和設(shè)計師多溝通,以免造成不必要的時間浪費。
在響應式網(wǎng)頁的設(shè)計過程中,其中也會涉及到一些用戶體驗方面的問題和弊端,需要進一步的優(yōu)化。
(1)減輕Javascript庫負載
對于移動端來說,jQuery表現(xiàn)的太過厚重,而現(xiàn)在針對移動端的狀態(tài)來說,有jQuery Mobile、YUI、XUI等可供選擇的框架。
(2)減少HTTP請求次數(shù)
移動端相比較PC端有一個特殊的限制需要考慮到,就是用戶的網(wǎng)絡(luò)流量是有限的。這時候針對這些頁面內(nèi)部的部分操作,可以使用Ajax異步請求來完成,針對短期內(nèi)不會變化的一些數(shù)據(jù),可以使用服務器端緩存、前端緩存等機制來保存這些數(shù)據(jù),這樣可以減少用戶一定的數(shù)據(jù)請求量。
(3)Javascript和CSS需要盡量壓縮
把頁面中使用的Javascript和CSS進行壓縮之后會有效地減少頁面大小。
(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)列表圖片實現(xiàn)“懶”加載
移動終端設(shè)備因為屏幕大小有限,沒有必要將全屏中的圖片一次性加載完成,網(wǎng)頁加載的同時,我們可以選擇逐個加載,當用戶進行滑動頁面的時候,再繼續(xù)加載圖片。
(6)圖片顯示的優(yōu)化處理
根據(jù)用戶設(shè)備的分辨率來加載不同分辨率下的不同圖片,這樣既能給不同終端的用戶一個很好的視覺體驗,又不會白白浪費用戶的網(wǎng)絡(luò)數(shù)據(jù)流量。
分享名稱:成都高端網(wǎng)站首選Html5響應式網(wǎng)站建設(shè)
網(wǎng)址分享:http://m.newbst.com/news/165666.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務項目有響應式網(wǎng)站等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容