隨著移動產(chǎn)品的日益豐富,出現(xiàn)了各種屏幕尺寸的手機(jī),Pad等移動設(shè)備。如果針對每一種尺寸的設(shè)備都獨立開發(fā)一個網(wǎng)站,成本會非常高,這時,響應(yīng)式Web設(shè)計應(yīng)運而生,響應(yīng)式網(wǎng)頁設(shè)計指的是網(wǎng)頁設(shè)計應(yīng)該根據(jù)設(shè)備環(huán)境(屏幕尺寸,屏幕定向,系統(tǒng)平臺等)以及用戶行為(改變窗口大小等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。
6.6.1響應(yīng)式Web設(shè)計的概念
響應(yīng)式網(wǎng)頁設(shè)計是目前流行的一種網(wǎng)頁設(shè)計形式,主要特色是頁面布局能根據(jù)不同設(shè)備(平板,PC,手機(jī))讓內(nèi)容適應(yīng)性的展示,讓用戶能在不同設(shè)備都能夠友好地瀏覽網(wǎng)頁內(nèi)容。從而為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。
6.6.2響應(yīng)式Web設(shè)計相關(guān)技術(shù)
響應(yīng)式Web設(shè)計是和HTML5+CSS3互相配合與支持的,實現(xiàn)響應(yīng)式設(shè)計包括以下技術(shù)點:
1) HTML5+CSS3的基本網(wǎng)頁設(shè)計。
2) 視口(meta):提供可以配置視口的屬性。
3) CSS媒體查詢 (Media Queries):識別媒體類型,特征(屏幕寬度,像素比等)。
4) 流式布局(Fluid Layout):可以根據(jù)瀏覽器的寬度和屏幕的大小自動調(diào)整效果。
5) 流式圖片(Fluid Images):隨流失布局進(jìn)行相應(yīng)縮放,可以理解為圖片的流式布局
6) 響應(yīng)式柵格系統(tǒng):依賴于媒體查詢,根據(jù)不同的屏幕大小調(diào)整布局。
7) 彈性盒布局:CSS3的彈性盒布局,一個可以告別浮動,完美地實現(xiàn)垂直居中的新特性。
8) 彈性圖片:指的是不給圖片設(shè)置固定尺寸,而是通過設(shè)置img{max-width:100%},讓圖片大小自動適應(yīng)屏幕大小。
實現(xiàn)響應(yīng)式Web設(shè)計,可以說就是根據(jù)顯示屏幕大小的變化控制頁面的文檔流,適配不同類型的終端顯示設(shè)備。
評論列表