響應式柵格佈局

###寫在前面

黯羽輕揚首頁是用偽絕對定位實現的 24 列 960 柵格，發現偽絕對定位和柵格佈局簡直是絕配，靈活性、自適應性、易用性都沒得說。部落格接著用 960 柵格，但需要支援行動閱讀，自然就想到了 media query，結果發現很容易去掉柵格（當然，都是偽絕對定位帶來的好處）

##一.偽絕對定位

出現偽絕對定位是因為絕對定位和浮動定位在柵格佈局上都存在種種弊端

絕對定位柵格的缺點：

高度無法自適應

position: absolute; 後，元素就脫離了標準文件流，瀏覽器渲染時不再計算其高度，所以父元素會塌陷（高度無法自適應）

動態佈局中無法使用

如果存在非絕對定位的元素，那麼它很難定位（無法確定 (left, top) 點有沒有內容）

浮動定位柵格的缺點：

脆弱

任何一個元素的 width, margin, padding, border 都會影響整個頁面佈局，只要寬度超出 1px，行尾的元素都會被擠下去，然後下面所有行都完了。。精心拼湊的精確像素局部全碎了

偽絕對定位解決了這些問題，在柵格佈局上非常好用，原理很簡單：

頂級容器定寬

.body {
    overflow: hidden;   /* 讓輔助定位的子容器不可見 */
    width: 950px;       /* 定寬 */
}

子容器浮動到頂級容器外，右邊緣處

.container {
    float: left;         /* 浮動 */
    position: relative;  /* 為第三步做準備 */
    width: 100%;         /* 給內容提供負邊距參照 */
    left: 100%;          /* 出去 */
}

子容器的內容負邊距，移回頂級容器區域

/* 2 列 100 : 850 */
.content1 {
    margin-left: -950px;    /* 移回頂級容器區域 */
    width: 100px;
}
.content2 {
    margin-left: -850px;    /* 移回頂級容器區域 */
    width: 850px;
}

子容器的內容可以撐起右側看不見的子容器，所有 2 級容器能夠撐起頂級容器，高度自適應了，定位依賴負邊距，不依賴浮動定位，也就不存在牽一髮而動全身的問題了

##二.media query

media query 實現響應式佈局需要先解決 2 個問題：

###1.media query 條件

根據手機、平板、PC 的寬度分別寫 media query？不用這麼麻煩，比如 960 柵格在寬度大於 960 的設備上能夠正常顯示，在寬度小於 960 的設備上不能正常顯示，我們只需要多寫一套樣式（max-width: 959px）就行，當然這裡指的是設備物理像素，相容性較好的做法如下：

html 宣告 width 為物理像素寬度

<meta name="viewport" content="width=device-width, initial-scale=1" />

css 方式宣告 width 為物理像素寬度

/* IE10+ */
@-ms-viewport {
    width: device-width;
}
/* W3C 標準 */
@viewport {
    width: device-width;
}

media query

/* <=959 */
@media screen and (max-width: 959px) {
/*...*/
}

###2.去柵格

針對小屏設備的樣式需要覆蓋掉已經構築好的柵格，理想的情況是有一個好用的 reset，能夠重置所有需要覆蓋的樣式。當然，這不可能，但去掉偽絕對定位實現的柵格很容易：

/* 頂級容器 */
.body {
    overflow: visible;
    width: auto;
}
/* 子容器 */
.container {
    float: nonr;
    position: static;
    width: auto;
    left: auto;
}
/* 內容 */
.content {
    margin-left: 0;
    width: auto;
}

把這些東西恢復預設值即可去柵格，這是很大的優勢（如果是絕對定位柵格，去柵格的工作量想想都害怕。。）

##三.Bootstrap 柵格

Bootstrap 也提供了響應式柵格，支援以下特性：

設備區分（col-xs、col-sm、col-md、col-lg）
列偏移
嵌套列（算是柵格佈局本身的特點）
列排序（調整顯示順序與 html 宣告的順序不同）

Bootstrap 用的不是偽絕對定位柵格，而是百分比佈局

###參考資料

http://960.gs/：一萬個柵格佈局
Bootstrap 柵格系統
Faux Absolute Positioning：原版
偽絕對定位 (譯)：漢化版，推薦

評論

提交評論