亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

網(wǎng)頁布局之響應(yīng)式設(shè)計簡明指南

  發(fā)布時間：2014-04-12 14:44:13   作者：佚名   我要評論
這篇文章主要介紹了網(wǎng)頁布局的響應(yīng)式設(shè)計簡明指南,通俗易懂,實例講解,需要的朋友可以參考下

一、為什么要使用響應(yīng)式設(shè)計？

我們想讓我們的網(wǎng)站通過響應(yīng)用戶的行為、設(shè)備的屏幕大小和屏幕方向，從而在所有設(shè)備上都能用。

二、一個碎片化的世界

截止2013年，有成千上萬種不同的設(shè)備在瀏覽網(wǎng)頁，所以我們不可能設(shè)計出適應(yīng)所有屏幕大小的網(wǎng)頁。相反，我們必須得采用一種更加流暢的方式去設(shè)計。

三、移動優(yōu)先

最近一個比較火的詞叫移動優(yōu)先。它的意思是，先為移動端設(shè)計樣式，然后再根據(jù)需求去優(yōu)化更大屏幕的樣式。換句話說，假如你把移動端樣式當(dāng)成網(wǎng)站的默認(rèn)樣式，且以后不用去優(yōu)化它，一步到位。那就更省事了！

復(fù)制代碼
代碼如下:

”假定默認(rèn)使用一個靈活但簡單的布局，你的確可以適配各種瀏覽器，但這還不算是完全做到了響應(yīng)式布局。所以當(dāng)我們談?wù)摗敢苿觾?yōu)先」，實際上是在說「漸進(jìn)增強」。“
—Ethan Marcotte

四、用 Min-width 進(jìn)行媒體查詢（ Media Queries ）

現(xiàn)在來介紹一種特別的布局方式。 通過 min-width 來界定不同屏幕該如何布局。它能就近檢測出不同設(shè)備的屏幕大?。?media queries，可直譯為媒體查詢），比在樣式表末尾或一個單獨文件中處理更簡單。


復(fù)制代碼
代碼如下:

/* 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，不同瀏覽器渲染出來的效果不一樣。為了避免出現(xiàn)這種情況，你可以使用類似 Normalize.css 這種更好的 CSS 來幫助你實現(xiàn)跨瀏覽器顯示。當(dāng)然，你要把這份CSS放在你樣式表最前面。

復(fù)制代碼
代碼如下:

<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è)備上起作用

復(fù)制代碼
代碼如下:
<meta name="viewport" content="width=device-width, initial-scale=1">

3、CSS 盒模型

基礎(chǔ)很重要！在深入響應(yīng)式設(shè)計之前，最好把像 HTML 元素如何在瀏覽器中生成并渲染這類知識搞清楚。CSS 盒模型由以下四部分組成。

4、設(shè)置 box-sizing: border-box

在 CSS 文件最頂端設(shè)置 box-sizing。運用 * 通用選擇器使其應(yīng)用到頁面的每個元素上。

復(fù)制代碼
代碼如下:

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

5、你的選擇

CSS 有個常見 BUG。是否設(shè)置 box-sizing，將意味著 border 和 padding 的值是否計算在 width 之內(nèi)。



6、創(chuàng)建容器

一個容器將包含頁面所有標(biāo)簽，并控制頁面最大寬度. 運用容器，讓我們的響應(yīng)式設(shè)計更進(jìn)了一步！

復(fù)制代碼
代碼如下:
.container {
margin: 0 auto;
max-width: 48rem;
width: 90%;
}
<div class="container">
<!-- Your Content -->
</div>

7、創(chuàng)建列

在移動優(yōu)先里，列默認(rèn)均是 block 級別的（可以占滿整行的寬度）。不需要額外的樣式！

復(fù)制代碼
代碼如下:

<div class="container">
<div class="column">
<!-- Your Content -->
</div>
</div>

8、創(chuàng)建列寬

在大屏中，用 float: left 將列水平排列。然后運用 padding 設(shè)置相鄰兩列之間的間隙，忘掉傳統(tǒng)的margin吧。


復(fù)制代碼
代碼如下:

<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)，以避免其他元素堆放在其旁邊造成布局混亂。否則就會出現(xiàn)廣為人知的 clearing 問題。出現(xiàn)之后可以使用由 Nicolas Gallagher 發(fā)明的 clearfix 解決。

復(fù)制代碼
代碼如下:
<div class="container">
<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、相對流（ Flow Opposite ）

給你想讓它在移動端優(yōu)先顯示，而在大屏幕中右側(cè)顯示的列，添加 .flow-opposite 類。

復(fù)制代碼
代碼如下:

<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; }
}



五、熟能生巧

通過這些簡單的步驟，你已經(jīng)走上了響應(yīng)式設(shè)計之路。堅持練習(xí)，會讓你的網(wǎng)頁更好更實用。

相關(guān)文章

最新評論