網(wǎng)頁(yè)布局之響應(yīng)式設(shè)計(jì)簡(jiǎn)明指南
我要評(píng)論一、為什么要使用響應(yīng)式設(shè)計(jì)？
我們想讓我們的網(wǎng)站通過(guò)響應(yīng)用戶的行為、設(shè)備的屏幕大小和屏幕方向，從而在所有設(shè)備上都能用。
二、一個(gè)碎片化的世界
截止2013年，有成千上萬(wàn)種不同的設(shè)備在瀏覽網(wǎng)頁(yè)，所以我們不可能設(shè)計(jì)出適應(yīng)所有屏幕大小的網(wǎng)頁(yè)。相反，我們必須得采用一種更加流暢的方式去設(shè)計(jì)。
三、移動(dòng)優(yōu)先
最近一個(gè)比較火的詞叫移動(dòng)優(yōu)先。它的意思是，先為移動(dòng)端設(shè)計(jì)樣式，然后再根據(jù)需求去優(yōu)化更大屏幕的樣式。換句話說(shuō)，假如你把移動(dòng)端樣式當(dāng)成網(wǎng)站的默認(rèn)樣式，且以后不用去優(yōu)化它，一步到位。那就更省事了！
”假定默認(rèn)使用一個(gè)靈活但簡(jiǎn)單的布局，你的確可以適配各種瀏覽器，但這還不算是完全做到了響應(yīng)式布局。所以當(dāng)我們談?wù)摗敢苿?dòng)優(yōu)先」，實(shí)際上是在說(shuō)「漸進(jìn)增強(qiáng)」。“
—Ethan Marcotte
四、用 Min-width 進(jìn)行媒體查詢（ Media Queries ）
現(xiàn)在來(lái)介紹一種特別的布局方式。 通過(guò) min-width 來(lái)界定不同屏幕該如何布局。它能就近檢測(cè)出不同設(shè)備的屏幕大?。?media queries，可直譯為媒體查詢），比在樣式表末尾或一個(gè)單獨(dú)文件中處理更簡(jiǎn)單。
/* Small screens (default) */
html { font-size: 100%; }
/* Medium screens (640px) */
@media (min-width: 40rem) {
html { font-size: 112%; }
}
/* Large screens (1024px) */
@media (min-width: 64rem) {
html { font-size: 120%; }
}
1、不是所有瀏覽器生而平等
同一份 CSS，不同瀏覽器渲染出來(lái)的效果不一樣。為了避免出現(xiàn)這種情況，你可以使用類似 Normalize.css 這種更好的 CSS 來(lái)幫助你實(shí)現(xiàn)跨瀏覽器顯示。當(dāng)然，你要把這份CSS放在你樣式表最前面。
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/grid.css">
2、在 Viewport 里加 Meta 標(biāo)簽
在你 HTML 的<head> 代碼里添加 Meta 標(biāo)簽。它可以使 media queries 在不同設(shè)備上起作用
3、CSS 盒模型
基礎(chǔ)很重要！在深入響應(yīng)式設(shè)計(jì)之前，最好把像 HTML 元素如何在瀏覽器中生成并渲染這類知識(shí)搞清楚。CSS 盒模型由以下四部分組成。
4、設(shè)置 box-sizing: border-box
在 CSS 文件最頂端設(shè)置 box-sizing。運(yùn)用 * 通用選擇器使其應(yīng)用到頁(yè)面的每個(gè)元素上。
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
5、你的選擇
CSS 有個(gè)常見(jiàn) BUG。是否設(shè)置 box-sizing，將意味著 border 和 padding 的值是否計(jì)算在 width 之內(nèi)。
6、創(chuàng)建容器
一個(gè)容器將包含頁(yè)面所有標(biāo)簽，并控制頁(yè)面最大寬度. 運(yùn)用容器，讓我們的響應(yīng)式設(shè)計(jì)更進(jìn)了一步！
margin: 0 auto;
max-width: 48rem;
width: 90%;
}
<div class="container">
<!-- Your Content -->
</div>
7、創(chuàng)建列
在移動(dòng)優(yōu)先里，列默認(rèn)均是 block 級(jí)別的（可以占滿整行的寬度）。不需要額外的樣式！
<div class="container">
<div class="column">
<!-- Your Content -->
</div>
</div>
8、創(chuàng)建列寬
在大屏中，用 float: left 將列水平排列。然后運(yùn)用 padding 設(shè)置相鄰兩列之間的間隙，忘掉傳統(tǒng)的margin吧。
<div class="container">
<div class="row clearfix">
<div class="column half">
<!-- Your Content -->
</div>
<div class="column half">
<!-- Your Content -->
</div>
</div>
</div></p> <p>@media (min-width: 40rem) {
.column {
float: left;
padding-left: 1rem;
padding-right: 1rem;
}
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%; }
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: right; }
}
9、創(chuàng)建行
列應(yīng)該包裹在行內(nèi)，以避免其他元素堆放在其旁邊造成布局混亂。否則就會(huì)出現(xiàn)廣為人知的 clearing 問(wèn)題。出現(xiàn)之后可以使用由 Nicolas Gallagher 發(fā)明的 clearfix 解決。
<div class="row clearfix">
<div class="column half">
<!-- Your Content -->
</div>
<div class="column half">
<!-- Your Content -->
</div>
</div>
<div class="row clearfix">
<div class="column half">
<!-- Your Content -->
</div>
<div class="column half">
<!-- Your Content -->
</div>
</div>
</div>
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
10、相對(duì)流（ Flow Opposite ）
給你想讓它在移動(dòng)端優(yōu)先顯示，而在大屏幕中右側(cè)顯示的列，添加 .flow-opposite 類。
<div class="container">
<div class="row clearfix">
<div class="column half flow-opposite">
<!-- Your Content -->
</div>
<div class="column half">
<!-- Your Content -->
</div>
</div>
</div>
@media (min-width: 40rem) {
.column.flow-opposite { float: right; }
}
五、熟能生巧
通過(guò)這些簡(jiǎn)單的步驟，你已經(jīng)走上了響應(yīng)式設(shè)計(jì)之路。堅(jiān)持練習(xí)，會(huì)讓你的網(wǎng)頁(yè)更好更實(shí)用。
相關(guān)文章
CSS3 Media Queries(響應(yīng)式布局可以讓你定制不同的分辨率和設(shè)備)
Media Queries這功能是非常強(qiáng)大的，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下，讓你制作的web頁(yè)面在不同的分辨率和設(shè)備下都能顯示正常，并且不會(huì)因此而丟2013-06-06css3的@media屬性實(shí)現(xiàn)頁(yè)面響應(yīng)式布局示例代碼
使用css3的@media屬性可以實(shí)現(xiàn)頁(yè)面響應(yīng)式布局，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-10
跨瀏覽器和響應(yīng)式的jQuery網(wǎng)格布局瀑布流插件Freewall
一款跨瀏覽器和響應(yīng)式的網(wǎng)格布局jQuery插件2014-03-24支持IE8的純css3開(kāi)發(fā)的響應(yīng)式設(shè)計(jì)動(dòng)畫(huà)菜單教程
這篇主要講利用css3設(shè)計(jì)一個(gè)響應(yīng)式設(shè)計(jì)的菜單。單擊列表圖標(biāo)，當(dāng)你顯示屏大小可以完全水平放下所有菜單項(xiàng)時(shí)，菜單水平顯示。當(dāng)你的顯示屏不能水平放置所有菜單項(xiàng)時(shí)，菜單垂2014-11-05- 本文從響應(yīng)式布局的概念，響應(yīng)式布局的優(yōu)缺點(diǎn)以及設(shè)計(jì)理念，還有具體的實(shí)現(xiàn)代碼都做了詳細(xì)說(shuō)明，是篇不可多得的文章，這里推薦給小伙伴2014-12-24
