- 相關(guān)推薦
什么是響應(yīng)式布局
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。
優(yōu)點(diǎn)： 面對(duì)不同分辨率設(shè)備靈活性強(qiáng)
能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點(diǎn)：兼容各種設(shè)備工作量大，效率低下
代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長(zhǎng)
其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶混淆的情況
響應(yīng)式設(shè)計(jì)的步驟：
1. 設(shè)置 Meta 標(biāo)簽
大多數(shù)移動(dòng)瀏覽器將html頁面放大為寬的視圖(viewport)以符合屏幕分辨率。你可以使用視圖的meta標(biāo)簽來進(jìn)行重置。下面的視圖標(biāo)簽告訴瀏覽器，使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。在標(biāo)簽里加入這個(gè)meta標(biāo)簽。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
[1](user-scalable = no 屬性能夠解決 iPad 切換橫屏之后觸摸才能回到具體尺寸的問題。 )
2. 通過媒介查詢來設(shè)置樣式 Media Queries
viaMedia Queries 是響應(yīng)式設(shè)計(jì)的核心。
它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。假如一個(gè)終端的分辨率小于 980px，那么可以這樣寫：
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
這里的樣式就會(huì)覆蓋上面已經(jīng)定義好的樣式。
3. 設(shè)置多種試圖寬度
假如我們要設(shè)定兼容 iPad 和 iphone 的視圖，那么可以這樣設(shè)置：
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
【什么是響應(yīng)式布局】相關(guān)文章：
響應(yīng)式網(wǎng)頁設(shè)計(jì)技巧10-09
響應(yīng)式網(wǎng)站該如何設(shè)計(jì)10-16
響應(yīng)交互式網(wǎng)頁設(shè)計(jì)06-29
響應(yīng)式網(wǎng)頁設(shè)計(jì)的工具有哪些10-09
15個(gè)優(yōu)秀響應(yīng)式網(wǎng)頁設(shè)計(jì)教程08-23
如何快速測(cè)試響應(yīng)式網(wǎng)頁設(shè)計(jì)的Chrome擴(kuò)展07-31
自適應(yīng)設(shè)計(jì)與響應(yīng)式網(wǎng)頁設(shè)計(jì)的區(qū)別07-14
網(wǎng)頁設(shè)計(jì)靈動(dòng)布局之相對(duì)自由式示例08-29
薄膜式鍵盤是什么10-24