什么是響應(yīng)式布局？
響應(yīng)式布局指的是同一頁面在不同屏幕尺寸下有不同的布局。在移動(dòng)互聯(lián)網(wǎng)高度發(fā)達(dá)的今天，我們在桌面瀏覽器上開發(fā)的網(wǎng)頁已經(jīng)無法滿足在移動(dòng)設(shè)備上查看的需求。傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套頁面，手機(jī)端再開發(fā)一套頁面。但是這樣做非常麻煩，隨著不同的終端越來越多，你需要開發(fā)多個(gè)不同版本的頁面。而使用響應(yīng)式布局只要開發(fā)一套就夠了。EthanMarcotte在2010年5月份提出了響應(yīng)式布局的概念，簡而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端。
| 開發(fā)方式 | 移動(dòng)web開發(fā)+PC開發(fā) | 響應(yīng)式開發(fā) |
| 應(yīng)用場景 | 一般在已經(jīng)有PC端的網(wǎng)站，開發(fā)移動(dòng)站的時(shí)候，只需單獨(dú)開發(fā)移動(dòng)端。 | 針對新建站的一些網(wǎng)站，現(xiàn)在要求適配移動(dòng)端，所以就一套頁面兼容各種終端，靈活。 |
| 開發(fā) | 針對性強(qiáng)，開發(fā)效率高 | 兼容各種終端，效率低 |
| 適配 | 只適配 移動(dòng)設(shè)備，pad上體驗(yàn)相對較差 | 可以適配各種終端 |
| 效率 | 代碼簡潔，加載快 | 代碼相對復(fù)雜，加載慢 |
響應(yīng)式開發(fā)與移動(dòng)端與PC端分別開發(fā)的區(qū)別：響應(yīng)式開發(fā)只編寫一套界面，通過檢測視口分辨率，針對不同客戶端在客戶端做代碼處理，來展現(xiàn)不同的布局和內(nèi)容。移動(dòng)端與PC端分別開發(fā)，通過檢測視口分辨率，來判斷當(dāng)前訪問的設(shè)備是pc端、平板、手機(jī)， 從而請求服務(wù)器，返回不同的頁面。
響應(yīng)式開發(fā)的原理？
響應(yīng)式開發(fā)的原理是使用CSS3中的Media Query（媒體查詢）針對不同寬度的設(shè)備設(shè)置不同的布局和樣式，從而適配不同的設(shè)備。
SS3 @media 查詢定義和使用：
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的。當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。
例如屏幕寬度小于 500 像素則修改背景顏色(background-color)為紅色。
要實(shí)現(xiàn)響應(yīng)式布局，常用的方式有以下幾種：
（1）使用 CSS 中的媒體查詢（最簡單）；
（2）使用 JavaScript（使用成本比較高）；
（3）使用第三方開源框架（例如 bootstrap，可以很好的支持各種瀏覽器）。
設(shè)置 meta 標(biāo)簽
首先，我們需要設(shè)置 meta 標(biāo)簽來告訴瀏覽器，讓視口（網(wǎng)頁的可視區(qū)域）的寬度等于設(shè)備的寬度，并禁止用戶對頁面的縮放，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
在設(shè)置視口時(shí)需要注意，視口就是網(wǎng)頁可見區(qū)域的尺寸，設(shè)置視口時(shí)只設(shè)置寬度就行，不用在乎高度，具體高度由網(wǎng)頁內(nèi)容自動(dòng)撐開。上面 meta 標(biāo)簽中內(nèi)容的含義如下：
● viewport：即視口，表示網(wǎng)頁的可視區(qū)域；
● width：控制 viewport 的大小，可以指定一個(gè)具體的值，例如 600，也可以是由關(guān)鍵字組成的特殊值，例如 device-width 就表示設(shè)備的寬度；
● initial-scale：表示初始縮放比例，也就是頁面第一次加載時(shí)的縮放比例；
● maximum-scale：表示允許用戶縮放的最大比例，范圍從 0 到 10.0；
● minimum-scale：表示允許用戶縮放到最小比例，范圍從 0 到 10.0；
● user-scalable：表示用戶是否可以手動(dòng)縮放，“yes”表示允許縮放，“no”表示禁止縮放。
媒體查詢
CSS 媒體查詢可以根據(jù)指定的條件，針對不同的媒體類型（screen print）定義不同的 CSS 樣式，讓使用不同設(shè)備的用戶都能得到最佳的體驗(yàn)。
用HTML舉例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>響應(yīng)式頁面入門教程：Albert Yang</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <header> <a href="#">AlbertYang</a> <ul> <li><a href="#">首頁</a></li> <li><a href="#">博客</a></li> <li><a href="#">聯(lián)系我</a></li> <li><a href="#">留言板</a></li> <li><a href="#">關(guān)于我</a></li> <li><a href="#">照片墻</a></li> </ul> <div> <input type="text" placeholder="Search"> <i class="fa fa-search" aria-hidden="true"></i> </div> </header> <div> <div> <h2>響應(yīng)式布局</h2> <p> 響應(yīng)式布局指的是同一頁面在不同屏幕尺寸下有不同的布局。 傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套，手機(jī)端再開發(fā)一套，而使用響應(yīng)式布局只要開發(fā)一套就夠了。 響應(yīng)式設(shè)計(jì)與自適應(yīng)設(shè)計(jì)的區(qū)別：響應(yīng)式開發(fā)一套界面， 通過檢測視口分辨率，針對不同客戶端在客戶端做代碼處理， 來展現(xiàn)不同的布局和內(nèi)容；自適應(yīng)需要開發(fā)多套界面， 通過檢測視口分辨率，來判斷當(dāng)前訪問的設(shè)備是pc端、平板、手機(jī)， 從而請求服務(wù)層，返回不同的頁面。CSS3媒體查詢可以讓我們針對不同的媒體類型定義不同的樣式， 當(dāng)重置瀏覽器窗口大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。 </p> <a href="#">閱讀全文</a> </div> <img src="img.png"> </div> </body> </html>
運(yùn)行結(jié)果：
下面通過一個(gè)綜合的示例來演示一下響應(yīng)式布局的實(shí)現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>響應(yīng)式布局</title>
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<style>
*{
margin: 0px;
padding: 0px;
font-family: "微軟雅黑";
}
#head, #foot, #main
{
height: 100px;
width: 1200px;
/*width: 85%;*/
background-color: goldenrod;
text-align: center;
font-size: 48px;
line-height: 100px;
margin: 0 auto;
}
#head div{
display: none;
font-size: 20px;
height: 30px;
width: 100px;
background-color: green;
float: right;
line-height: 30px;
margin-top: 35px;
}
#head ul{
width: 80%;
}
#head ul li{
width: 20%;
float: left;
text-align: center;
list-style: none;font-size: 20px;
}
#main{
height: auto;
margin: 10px auto;
overflow: hidden;
}
.left, .center, .right{
height: 600px;
line-height: 600px;
float: left;
width: 20%;
background-color: red
}
.center{
width: 60%;
border-left: 10px solid #FFF;
border-right: 10px solid #FFF;
box-sizing: border-box;
}
@media only screen and (max-width: 1200px) {
#head, #foot, #main{
width: 100%;
}
}
@media only screen and (max-width: 980px) {
.right{
display: none;
}
.left{
width: 30%;
}
.center{
width: 70%;
border-right: hidden;
}
}
@media only screen and (max-width: 640px) {
.left, .center, .right{
width: 100%;
display: block;
height: 200px;
line-height: 200px;
}
.center{
border: hidden;
border-top: 10px solid #FFFFFF;
border-bottom: 10px solid #FFFFFF;
height: 600px;
line-height: 600px;
}
#head ul{
display: none;
}
#head div{
display: block;
}
}
</style>
</head>
<body>
<div>
<header id="head">
<ul>
<li>header1</li>
<li>header2</li>
<li>header2</li>
<li>header2</li>
<li>header2</li>
</ul>
<div>icon</div>
</header>
<section id="main">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</section>
<footer id="foot">
footer
</footer>
</div>
</body>
</html>運(yùn)行結(jié)果：
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點(diǎn)擊了解：
一點(diǎn)編程也不會(huì)寫的：零基礎(chǔ)C語言學(xué)練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進(jìn)階課程
從零到寫出一個(gè)爬蟲的Python編程課程
只會(huì)語法寫不出代碼？手把手帶你寫100個(gè)編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程