重溫"什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)？響應(yīng)式布局的實(shí)現(xiàn)原理"

Nekron 發(fā)布于2019-08-29 12:28 / 541人閱讀

摘要：概念響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)最初是由提出的一個(gè)概念為什么一定要為每個(gè)用戶(hù)群各自打造一套設(shè)計(jì)和開(kāi)發(fā)方案設(shè)計(jì)應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動(dòng)響應(yīng)及調(diào)整。預(yù)計(jì)到年，移動(dòng)互聯(lián)網(wǎng)的數(shù)據(jù)流量將超越端的流量。

概念

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)最初是由 Ethan Marcotte 提出的一個(gè)概念：為什么一定要為每個(gè)用戶(hù)群各自打造一套設(shè)計(jì)和開(kāi)發(fā)方案？Web設(shè)計(jì)應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動(dòng)響應(yīng)及調(diào)整。當(dāng)然響應(yīng)式Web設(shè)計(jì)不僅僅是關(guān)于屏幕分辨率自適應(yīng)以及自動(dòng)縮放的圖片等等，它更像是一種對(duì)于設(shè)計(jì)的全新思維模式；我們應(yīng)當(dāng)向下兼容、移動(dòng)優(yōu)先。

背景

PC互聯(lián)網(wǎng)加速向移動(dòng)端遷移：2012年12月底我國(guó)網(wǎng)民規(guī)模達(dá)到5.64億，互聯(lián)網(wǎng)普及率為42.1%，手機(jī)用戶(hù)占網(wǎng)民總數(shù)的74.5%。預(yù)計(jì)到2015年，移動(dòng)互聯(lián)網(wǎng)的數(shù)據(jù)流量將超越PC端的流量。

移動(dòng)端入口：當(dāng)用戶(hù)希望通過(guò)手機(jī)來(lái)完成PC頁(yè)的操作時(shí)，常見(jiàn)的是商家的運(yùn)營(yíng)微博，期文案足夠吸引用戶(hù)點(diǎn)擊鏈接參加活動(dòng)，如果該活動(dòng)頁(yè)沒(méi)做響應(yīng)式處理：頁(yè)面體積大、請(qǐng)求多、體驗(yàn)差、兼容性差，層層阻礙最終導(dǎo)致用戶(hù)放棄參加。

優(yōu)勢(shì) 開(kāi)發(fā)成本低，門(mén)檻低

Native APP：Objective-C or Java – 學(xué)習(xí)成本高
Hybrid APP： 外殼+Web APP，需安裝。
響應(yīng)式Web APP：HTML5+JS+CSS – 門(mén)檻低，極易上手，迭代快

跨平臺(tái)和終端且不需要分配子域

雖然可通過(guò)監(jiān)測(cè)用戶(hù)UA來(lái)判斷用戶(hù)終端后做跳轉(zhuǎn)，但它還是分配了多個(gè)域，而響應(yīng)式無(wú)需監(jiān)測(cè)用戶(hù)UA沒(méi)有域的切換，只需根據(jù)終端類(lèi)型來(lái)適配不同的功能模塊與表現(xiàn)樣式，它是跨平臺(tái)和終端的，1頁(yè)面適配多終端。

PC – http://qzone.com
Mobile – http://m.qzone.com
響應(yīng)式：PC & Mobile – http://qzone.com 無(wú)需跳轉(zhuǎn)

本地存儲(chǔ)

Web App可以利用本地存儲(chǔ)的特性將重要和重復(fù)的數(shù)據(jù)保存在本地，避免頁(yè)面的重復(fù)刷新，減少重要信息在傳輸過(guò)程中被泄露，增量傳輸修改內(nèi)容。

無(wú)需安裝成本，迭代更新容易

responsive-web-design

更靈活、更方便的APP使用及安裝方式將成為HTML5在移動(dòng)平臺(tái)上大放異彩的保障之一

實(shí)施

首先我們應(yīng)該遵循移動(dòng)優(yōu)先原則，交互&設(shè)計(jì)應(yīng)以移動(dòng)端為主，PC則作為移動(dòng)端的一個(gè)擴(kuò)展；
一個(gè)頁(yè)面需要兼容不同終端，那么有兩個(gè)關(guān)鍵點(diǎn)是我們需要去做到響應(yīng)式的：

響應(yīng)式布局
響應(yīng)式內(nèi)容（圖片、多媒體）

響應(yīng)式布局

如我們需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式豎屏(portrait)、橫屏(landscape)，怎樣才能做到讓一種設(shè)計(jì)方案滿(mǎn)足所有情況？

那么我們的布局應(yīng)該是一種彈性的柵格布局，不同尺寸下彈性適應(yīng)，如以下頁(yè)面中各模塊在不同尺寸下的位置：

響應(yīng)式布局

那么我們要怎么做？

Meta標(biāo)簽定義

使用 viewport meta 標(biāo)簽在手機(jī)瀏覽器上控制布局

通過(guò)快捷方式打開(kāi)時(shí)全屏顯示

隱藏狀態(tài)欄

iPhone會(huì)將看起來(lái)像電話(huà)號(hào)碼的數(shù)字添加電話(huà)連接，應(yīng)當(dāng)關(guān)閉

使用 Media Queries 適配對(duì)應(yīng)樣式

常用于布局的CSS Media Queries有以下幾種

設(shè)備類(lèi)型(media type):

all所有設(shè)備
screen 電腦顯示器
print打印用紙或打印預(yù)覽視圖
handheld便攜設(shè)備
tv電視機(jī)類(lèi)型的設(shè)備
speech語(yǔ)意和音頻盒成器
braille盲人用點(diǎn)字法觸覺(jué)回饋設(shè)備
embossed盲文打印機(jī)
projection各種投影設(shè)備
tty使用固定密度字母柵格的媒介，比如電傳打字機(jī)和終端

設(shè)備特性(media feature):

width瀏覽器寬度
height瀏覽器高度
device-width設(shè)備屏幕分辨率的寬度值
device-height設(shè)備屏幕分辨率的高度值
orientation瀏覽器窗口的方向縱向還是橫向，當(dāng)窗口的高度值大于等于寬度時(shí)該特性值為portrait，否則為landscape
aspect-ratio比例值，瀏覽器的縱橫比
device-aspect-ratio比例值，屏幕的縱橫比