HTML5網(wǎng)站響應(yīng)式布局的主流設(shè)計(jì)方法介紹及工具推薦

時(shí)間: 2017-02-25 11:54:24 點(diǎn)擊數(shù): 34227 來(lái)源: 耐思智慧

我們都知道，目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的顯示器。所以網(wǎng)頁(yè)不能再按照1024的標(biāo)準(zhǔn)來(lái)設(shè)計(jì)或者是前端重構(gòu)了。加上現(xiàn)在移動(dòng)互聯(lián)網(wǎng)的發(fā)展勢(shì)頭，國(guó)內(nèi)眾多電商網(wǎng)站還是門戶網(wǎng)站，移動(dòng)端的流量要大于pc端的，移動(dòng)互聯(lián)網(wǎng)平臺(tái)不容錯(cuò)過(guò)。

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

一、4種響應(yīng)式布局的設(shè)計(jì)方法

1，大圖平鋪?zhàn)赃m應(yīng)

這是一種給用戶感受最強(qiáng)烈的大背景全屏視覺(jué)，整個(gè)視覺(jué)主打一張完整圖片，交互和文字信息較為簡(jiǎn)單。圖片尺寸根據(jù)屏寬大小自適應(yīng)，交互菜單和文字信息通常默認(rèn)系統(tǒng)字體通過(guò)大小變換和位移進(jìn)行屏寬自適應(yīng)。

2、中心定位，兩側(cè)自適應(yīng)

這種方法是將內(nèi)容和視覺(jué)居中，把尺寸控制在1000px以內(nèi)。左右兩側(cè)放一些輔助信息，讓它們根據(jù)屏幕寬度自適應(yīng)。

3、單側(cè)定位，中心延伸展開(kāi)

這個(gè)方法就是把主要的內(nèi)容放在左側(cè)，然后右邊放一些輔助信息。這是根據(jù)用戶閱讀習(xí)慣決定的，中間這塊是自適應(yīng)屏幕寬度內(nèi)容。

4、小切糕全屏響應(yīng)式設(shè)計(jì)

其實(shí)小切糕全屏響應(yīng)式設(shè)計(jì)算是瀑布流里面的一種。是根據(jù)屏幕寬度進(jìn)行計(jì)算，以一個(gè)比較小的單元格微基礎(chǔ)，然后以2倍，3倍，4倍等方式進(jìn)行拓展，并計(jì)算出最適合的完整組合。通常用在圖片信息展示頁(yè)面。

二、響應(yīng)式布局的組成和常用插件介紹

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)頁(yè)。通過(guò)這一方法，我們能實(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)整頁(yè)面中每列的寬度，從而保證頁(yè)面始終處于完整展現(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)。

三、響應(yīng)式網(wǎng)站建站工具

市場(chǎng)上有很多響應(yīng)式建站工具，自由度較高的有建站寶盒V9，采用組合布局的形式（流布局+自由布局），通過(guò)拖拽添加模塊，能做出豐富多變的網(wǎng)站樣式，滿足不同企業(yè)和個(gè)人的建站需求，而且不需要編程基礎(chǔ)，一次實(shí)際，跨屏適用。適合不懂前端有想嘗試多元網(wǎng)頁(yè)布局的站長(zhǎng)。