HTML5網站響應式布局的主流設計方法介紹及工具推薦

時間: 2017-02-25 11:54:24 點擊數: 34056 來源: 耐思智慧

我們都知道，目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的顯示器。所以網頁不能再按照1024的標準來設計或者是前端重構了。加上現在移動互聯網的發展勢頭，國內眾多電商網站還是門戶網站，移動端的流量要大于pc端的，移動互聯網平臺不容錯過。

響應式的核心優勢在于設計者可以為所有設備使用同一種模板，只需要用CSS來定制內容在各種大小屏幕上的呈現方式。

一、4種響應式布局的設計方法

1，大圖平鋪自適應

這是一種給用戶感受最強烈的大背景全屏視覺，整個視覺主打一張完整圖片，交互和文字信息較為簡單。圖片尺寸根據屏寬大小自適應，交互菜單和文字信息通常默認系統字體通過大小變換和位移進行屏寬自適應。

2、中心定位，兩側自適應

這種方法是將內容和視覺居中，把尺寸控制在1000px以內。左右兩側放一些輔助信息，讓它們根據屏幕寬度自適應。

3、單側定位，中心延伸展開

這個方法就是把主要的內容放在左側，然后右邊放一些輔助信息。這是根據用戶閱讀習慣決定的，中間這塊是自適應屏幕寬度內容。

4、小切糕全屏響應式設計

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

二、響應式布局的組成和常用插件介紹

1、Media Query

Media Query的主要作用是根據不同的分辨率去調整一些不同的樣式。由于目前主流的移動設備都基于ios和Android，這兩者的自帶瀏覽器都是webkit內核，因此我們可以使用viewport屬性和Media Query技術實現響應式網頁。通過這一方法，我們能實現讓基準字號font-size在不同分辨率下顯示不一樣的內容。

2、Fluid grid

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

3、Flex box

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

三、響應式網站建站工具

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