根據(jù)維基百科定義：彈性網(wǎng)格布局、彈性圖片和媒體查詢整合起來，并將其命名為RWD（Responsive Web Design，響應(yīng)式布局）。下面分別介紹：
媒體查詢
- 首先看下百度百科對(duì)響應(yīng)式布局定義
百度百科 - 怎么調(diào)試
detail.png
- 具體實(shí)現(xiàn)
- viewport定義
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
width viewport寬度，為正整數(shù)或device-width
initial-scale 初始縮放值
maximum-scale 最大縮放值
minimum-scale 最小縮放值
user-scalable 是否允許縮放，為no或yes
- @media不同分辨率下適配方法
html {
font-size: 20px;
background: red;
}
@media only screen and (min-width: 320px) {
html {
font-size: 10px;
background: green;
}
}
@media only screen and (min-width: 375px) {
html {
font-size: 11.8px;
background: blue;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 13px;
background: yellow;
}
}
其中，rem是根元素(html)的字體大小。
另外，默認(rèn)font-size: 20px是針對(duì)640px設(shè)計(jì)的。依次類推，得出其它分辨率下的的font-size。
最終，展示效果
iphonese.png
iphone6.png
6ps.png
- Demo過程中發(fā)現(xiàn)的垂直居中技術(shù)點(diǎn)
設(shè)置line-height等于其元素高度
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}
<div class="btn">確定</div>
彈性圖片
彈性圖片指的是不給圖片設(shè)置固定尺寸，而是根據(jù)流體網(wǎng)絡(luò)進(jìn)行縮放，用于各種設(shè)備的尺寸。實(shí)現(xiàn)簡(jiǎn)單：
img {max-width: 100%;}
但在IE8上出現(xiàn)-圖片失蹤情況。解決方法如下：
使用background-image添加背景圖片；
顯示/隱藏父元素，給父元素使用不同的圖片，然后通過媒體查詢來控制顯示或隱藏。
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />
@media (min-device-width: 600px) {
img[data-src-600px] {
content: attr(data-src-600px,url);
}
}
@media (min-device-width: 800px) {
img[data-src-800px] {
content: attr(data-src-800px,url);
}
}
彈性網(wǎng)格布局
這塊內(nèi)容較多，在其他文章涉及。
