什么是響應式布局

摘 要：響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。該文介紹響應式布局頁面的基本表現、常用技術以及流行框架。

關鍵詞：響應式布局;百分比;媒體查詢;響應式布局框架

1? 什么是響應式布局

響應式布局是為了解決移動互聯網的瀏覽而誕生的，它是伊桑？馬科特（Ethan Marcotte）在2010年5月提出的概念，其基本是一個網站能夠兼容多種終端（手機、平板電腦、筆記本電腦或臺式機等），而不需要為每種終端開發一個特定的網站版本。響應式布局的目標是“一次設計，普遍適用”，也就是讓同一幅網頁自動適應不同大小的屏幕，在網頁主體內容不變的前提下，根據屏幕大小自動調整頁面的展現方式以及布局，同時還要保證良好的用戶體驗。

圖1所示是一個響應式網頁在臺式機瀏覽器上顯示的效果。頁頭是大幅廣告圖，廣告圖上方是一行鏈接組成的導航欄，下方由若干小圖組成的頁面主體。圖2所示是同一網頁在平板電腦上顯示的效果。頁頭和頁面主體的大布局沒有變化。頁頭廣告圖隨屏幕尺寸縮小而縮小;頁面主體的小圖沒有采取縮小的辦法，而是從橫向排列的一行變成縱向排列，既保證小圖數量不會缺失，又不會因縮得過小而影響用戶瀏覽。圖3（a）所示是同一網頁在手機上顯示的效果。頁頭和頁面主體的大布局依然沒有變化。頁頭的廣告圖隨屏幕尺寸縮小而進一步縮小（圖上的文字已經省略），同時廣告圖上方的導航欄變成縮略圖的圖標“? ? ? ? ? ?”，當鼠標點擊該圖標時，會彈出完整的縱向排列的導航欄，如圖3（b）所示;頁面主體小圖依然保持縱向排列。

2? 響應式布局的技術內涵

響應式布局的網頁要想達到以上效果，通常要運用一系列技術。

2.1? 百分比布局

為了讓網頁適應不同的屏幕尺寸，應該允許網頁寬度自動調整，剛好充滿整個屏幕或瀏覽器窗口而不被遮擋，百分比布局能較好地解決這個問題。響應式布局頁面中很少使用絕對寬度，而是大量使用百分比布局。

百分比是相對于固定像素尺寸單位而言的，是一種相對于父級元素的計量單位，重點強調寬度。當改變瀏覽器窗口大小的時候，采用百分比布局的頁面及其內部元素的尺寸也會隨之發生變化。比如，圖1中頁頭的廣告圖就可以設置成寬度為100%，其含義是廣告圖的寬度等于頁面寬度，所以無論瀏覽器窗口尺寸如何變化，廣告圖也是充滿頁面寬度的。

2.2? 媒體查詢布局

媒體查詢（media query）中所說的媒體可以理解成設備，所謂查詢，包括查詢設備的不同屏幕大小、不同分辨率等參數，使用CSS代碼進行媒體查詢可以創建響應式布局。

媒體查詢具體表現為一種位于CSS代碼中的判斷表達式，每個判斷式對應一組CSS樣式代碼。如果判斷結果為True，則應用該樣式表，如果為False則不應用該樣式表。通過若干判斷條件的組合，可以使我們靈活地對特定設計場景使用自定義的樣式規則。例如，當瀏覽器窗口最大寬度超過1200px時，圖1所示頁面主體的小圖橫向排列;瀏覽器窗口最大寬度小于1200px時，圖1所示頁面主體的小圖縱向排列。

響應式布局除了百分比布局、媒體查詢布局等常用技術，還包含動態顯示不同字體大小的移動端rem布局、隨窗口寬度的改變而動態改變水平方向布局的流式布局等內涵。所以，響應式布局不是一種技術的應用，而是一系列技術的組合。

2.3? 響應式布局框架

要達到類似圖2所示的效果——當窗口尺寸縮小到一定程度，導航欄變成一個縮略圖，就要靠編程實現了，常用手段是借助基于JavaScript語言的響應式前端框架。

響應式前端開發框架可以幫助前端開發人員大大簡化開發過程，每個框架會包含一定用途的UI組件及JavaScript插件。使用這些框架最大的特點是響應式，讓所有CSS組件及JavaScript插件都可以很好地從臺式機過渡到移動設備上，同時可以快速、方便地構建頁面布局，在導航、表單、下拉框、表格等UI組件的設計上保持風格一致。

目前比較流行的響應式布局框架有Bootstrap、Foundation、UI Kit、Pure、Amaze UI、Skeleton等。

3? 結論

響應式設計能夠適應各種屏幕或者設備進行頁面展現，解決了各種規格設備給程序員帶來的挑戰，讓同一個網頁無論是在傳統電腦、平板電腦或者手機上都能正常展示，也可以針對不同的設備定義不同的樣式。隨著目前移動設備的普及，響應式布局已經成為前端布局技術發展的趨勢之一。

參考文獻：

[1] 模板世界，Bootstrap藍色整潔企業網站模板–ultimate，http：//www.templatesy.com/demo/775/index.html，2017-09-05

[2] 前端開發博客，響應式布局框架，http：//caibaojian.com/responsive-frameworks.html，2015-02-03

[3] 知乎，什么是響應式布局設計？，https：//www.zhihu.com/question/20976405，2013-04-28

作者簡介：

朱立（1970.03），女，漢，北京市人，北京理工大學計算機應用技術專業2005級碩士研究生，北京信息職業技術學院副教授，主要研究方向為軟件技術。