怎么設(shè)計響應(yīng)式WEB？響應(yīng)式WEB設(shè)計的優(yōu)缺點

2024-08-30 08:35:45

字體：大中小

供稿：網(wǎng)友

近期在學習有關(guān)響應(yīng)式設(shè)計的內(nèi)容，對此做了些整理，部分圖片來源于網(wǎng)絡(luò)。

1、為什么需要響應(yīng)式web設(shè)計

由于目前移動設(shè)備的大量使用，以及PC顯示器的尺寸逐漸出現(xiàn)較大差別，傳統(tǒng)的web頁面已經(jīng)不能滿足多種設(shè)備的瀏覽效果，比如傳統(tǒng)頁面在大瀏覽器中會有較大的空白區(qū)域，而在小瀏覽器已經(jīng)移動設(shè)備中，不能完全顯示頁面，或是將頁面縮小至適應(yīng)移動設(shè)備尺寸大小，不能正常瀏覽，對于點擊觸點也有影響，很多人會選擇放大頁面，在進行瀏覽，這樣整個頁面就需要不停的拖動，給用戶的體驗不好。

簡而言之，有如下幾點：

各種屏幕尺寸各種操作系統(tǒng)各種訪問設(shè)備各種需求

2、什么是響應(yīng)式web設(shè)計

一個網(wǎng)站兼容多個終端。

同樣的代碼通過設(shè)備適配滿足不同的訪問設(shè)備能展現(xiàn)出不同的效果始終內(nèi)容優(yōu)先移動設(shè)備優(yōu)先:不引人注目的js和逐漸增強基于瀏覽器:特性活設(shè)備探測的逐漸增強

3、響應(yīng)式設(shè)計的替代方案

開發(fā)針對網(wǎng)站的、完全獨立的移動版本，開發(fā)移動應(yīng)用APP。但這樣做也存在一定的不足：

開發(fā)獨立版本的網(wǎng)頁，可以通過設(shè)備適配進行跳轉(zhuǎn)，需要維護多個頁面，對于首頁級別頁面適用，不適用于內(nèi)容頁開發(fā)移動應(yīng)用，開發(fā)成本高，不利于搜索引擎收錄

4、響應(yīng)式web設(shè)計的優(yōu)勢&不足

優(yōu)勢：

多終端視覺和操作體驗風格統(tǒng)一開發(fā)、維護、運營成本低不同設(shè)備間的兼容性強操作靈活：響應(yīng)式設(shè)計是針對頁面的，可以只對必要的頁面部分進行改動對用戶友好：用戶可以與網(wǎng)站一直保持聯(lián)系，比如URL不變積累分享：通過單一的URL地址收集所有的社交分享鏈接最佳化搜索引擎：可以完成移動網(wǎng)站和桌面網(wǎng)站的連接無重定向：包含無用戶代理定向

不足：

兼容性：低版本瀏覽器可能存在不兼容問題移動帶寬流量：相比移動版定制網(wǎng)站，流量稍大加載需要一定的時間：在響應(yīng)式設(shè)計中，需要下載一些看起來并不必要的HTML、CSS。除此之外，圖片并沒有根據(jù)設(shè)備調(diào)整到合適大小，而這正式導致加載時間加倍的原因優(yōu)化搜索引擎：對于響應(yīng)式web設(shè)計，為搜索引擎確定關(guān)鍵字不是一件容易的事。因此相比一般的桌面用戶，移動用戶多采用不同的關(guān)鍵字，修改標題及其他事項都比較困難Google排名：如果響應(yīng)式網(wǎng)站僅基于移動內(nèi)容，它困難會影響到網(wǎng)站的Google排名。因為Google不支持這樣的網(wǎng)站，它不會對你的網(wǎng)站進行索引時間花費：開發(fā)響應(yīng)式網(wǎng)站是一項耗時的工作。如果你計劃把一個現(xiàn)有的網(wǎng)站轉(zhuǎn)化成響應(yīng)式網(wǎng)站，可能耗時更多。如果你想要一個響應(yīng)式網(wǎng)站，最好從草圖開始重新設(shè)計布局：響應(yīng)式web設(shè)計的布局主要是液態(tài)的，這也正是設(shè)計者對設(shè)計樣式不好控制的原因。而且眼下正是設(shè)計者提前展示各種“復制品”的時候。設(shè)計者試圖針對移動和桌面布局分別顯示線框和設(shè)計原型。只有等到這兩種布局均得到提高后，響應(yīng)式web設(shè)計策略才能真正實現(xiàn)。

5、響應(yīng)式與自適應(yīng)的區(qū)別

響應(yīng)式布局：流體網(wǎng)絡(luò)

網(wǎng)頁的布局改變重新排布更好的用戶體驗測試難度大

自適應(yīng)布局：固定斷點

網(wǎng)頁的完全縮放實施代價低測試容易設(shè)計更加可控

6、移動終端屏顯元素

移動設(shè)備瀏覽器內(nèi)核：Trident（IE）、Gecko（FF）、Presto（opera，已廢棄）、Webkit（Safari、chrome）、Blink（google）

移動設(shè)備的尺寸：iPhone（980），iPad（1024），Android（分辨率480*800情況下，980），WinPhone（1024）等

移動設(shè)備的分辨率：