響應式布局網頁的設計與實現

梁敦毫

(廣東茂名幼兒師范?？茖W校，廣東茂名 525000)

0 引言

近年來，隨著移動互聯網的高速發展，移動互聯網用戶的數量已經遠遠超過了PC端用戶，由于移動設備使用便捷，越來越多的人喜歡通過手機、平板等移動設備來訪問網絡，例如，當想查看某學校官網時，用戶可能會通過手機登陸，如果打開的網站排版混亂、字體太小、滾動條很長等情況，不僅用戶體驗差，網站也達不到宣傳的效果。現在，大部分的網站都逐步往風格一致而且兼容不同的設備的方向發展，響應式布局就順應而生。響應式布局是指通過一套代碼使網頁內容能根據設備的不同尺寸良好的呈現不一樣的效果，從而提高用戶的體驗。

1 技術介紹

1.1 響應式布局

響應式布局是指一個網站能夠兼容不同的終端設備，而不需要為每個終端設備設計一個特定版本。響應式布局能根據不同的終端，呈現不同的顯示效果，為用戶帶來更好舒適的界面和更好的用戶體驗。

1.2 HTML5+CSS3

HTML5是最新的Web標準，在原有的HTML4基礎上增加了一些新的標簽和JavaScript接口，其中定義了很多語義化的標簽，如：header、footer、nav、main等，這些標簽給網頁的布局帶來了很大的便利。

CSS3是CSS(層疊樣式表)的最新版本，它在原有的CSS2.0的版本上增加了許多新的特性，例如，多列布局和彈性盒模型布局特性、媒體查詢特性等，其中，彈性盒模型布局方便了Web前端開發者根據復雜的前端分辨率進行彈性布局，輕松地實現頁面中的某一區塊在水平、垂直方向對齊，是進行響應式網站開發的一大利器[1]。媒體查詢能根據不同的分辨率的終端設備，定義不同的樣式。

1.3 Bootstrap

Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript開發的簡潔、直觀、強悍的前端開發框架，使得Web開發更加快捷[2]。Bootstrap提供了一套響應式、移動設備優先的流式網格系統，隨著屏幕或視口(viewport)尺寸的增加，系統會自動分為最多12列[3]。

2 響應式布局頁面的設計與實現

2.1 媒體查詢實現響應式布局

設計網頁布局的實現方式有很多種，但是主流的設計方式是DIV+CSS，這種方式結構代碼簡單，可以輕松的實現內容與表現相分離，提高網頁的加載速度，特別是在HTML5中增加了