溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“如何實(shí)現(xiàn)網(wǎng)頁(yè)布局中的響應(yīng)式設(shè)計(jì)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何實(shí)現(xiàn)網(wǎng)頁(yè)布局中的響應(yīng)式設(shè)計(jì)”吧!
一、為什么要使用響應(yīng)式設(shè)計(jì)？
我們想讓我們的網(wǎng)站通過響應(yīng)用戶的行為、設(shè)備的屏幕大小和屏幕方向，從而在所有設(shè)備上都能用。
二、一個(gè)碎片化的世界
截止2013年，有成千上萬種不同的設(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)化更大屏幕的樣式。換句話說，假如你把移動(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í)際上是在說「漸進(jìn)增強(qiáng)」?！?br/>—Ethan Marcotte
四、用 Min-width 進(jìn)行媒體查詢（ Media Queries ）
現(xiàn)在來介紹一種特別的布局方式。 通過 min-width 來界定不同屏幕該如何布局。它能就近檢測(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，不同瀏覽器渲染出來的效果不一樣。為了避免出現(xiàn)這種情況，你可以使用類似 Normalize.css 這種更好的 CSS 來幫助你實(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è)備上起作用
代碼如下:
<meta name="viewport" content="width=device-width, initial-scale=1">
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è)常見 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)了一步！
代碼如下:
.container {
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 問題。出現(xiàn)之后可以使用由 Nicolas Gallagher 發(fā)明的 clearfix 解決。
代碼如下:
<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、相對(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; }
}
五、熟能生巧
通過這些簡(jiǎn)單的步驟，你已經(jīng)走上了響應(yīng)式設(shè)計(jì)之路。堅(jiān)持練習(xí)，會(huì)讓你的網(wǎng)頁(yè)更好更實(shí)用。
到此，相信大家對(duì)“如何實(shí)現(xiàn)網(wǎng)頁(yè)布局中的響應(yīng)式設(shè)計(jì)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
