響應式頁面簡單示例
剛寫了一個如上圖所示的響應式頁面，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>響應式 草稿</title>
<style>
*{
margin: 0;
padding:0;
}
.log{
background: #000;
border-radius: 50%;
width: 140px;
height: 140px;
margin: 50px auto;
}
#head{
text-align: center;
}
#head li{
float: left;
width: 25%;
box-sizing: border-box;
padding: 10px;
}
#head ul{
max-width: 960px;
margin: 0 auto;
}
#head li p{
background-color: #ccc;
padding: 10px;
}
#nav{
text-align: center;
background-color: #666666;
padding-bottom: 25px;
padding-top: 25px;
margin: 25px auto;
}
ul li{
list-style: none;
}
.img{
height: 40px;
width: 100%;
background-color: #6633FF;
}
#card li{
float: left;
width: 33.333%;
padding: 10px;
box-sizing: border-box;
}
.clearfix:after{
display: block;
content: "";
clear: both;
}
#card {
max-width: 960px;
margin: 0 auto;
}
.two-line{
display: none;
}
@media (max-width: 720px) {
#card li{
width: 50%;
}
}
@media (max-width: 360px) {
#card li{
width: 100%;
}
.two-line{
display: block;
}
.one-line{
display: none;
}
#head li {
width: 50%;
}
}
</style>
</head>
<body>
<div id="head">
<div class="log"></div>
<ul class="clearfix">
<li>
<p>內容內容內容內容內容內容1</p>
</li>
<li>
<p>內容內容內容內容內容內容2</p>
</li>
<li>
<p>內容內容內容內容內容內容3</p>
</li>
<li>
<p>內容內容內容內容內容內容4</p>
</li>
</ul>
</div>
<div id="nav">
<h1 class="one-line">標題標題標題標題標題標題</h1>
<h1 class="two-line">標題標題標題 <br>
標題標題標題</h1>
<p>段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落</p>
</div>
<div id="card">
<ul class="clearfix">
<li>
<div class="img"></div>
<h3>標題1</h3>
<p>描述1</p>
</li>
<li>
<div class="img"></div>
<h3>標題2</h3>
<p>描述2</p>
</li>
<li>
<div class="img"></div>
<h3>標題3</h3>
<p>描述3</p>
</li>
<li>
<div class="img"></div>
<h3>標題4</h3>
<p>描述4</p>
</li>
<li>
<div class="img"></div>
<h3>標題5</h3>
<p>描述5</p>
</li>
<li>
<div class="img"></div>
<h3>標題6</h3>
<p>描述6</p>
</li>
<li>
<div class="img"></div>
<h3>標題7</h3>
<p>描述7</p>
</li>
<li>
<div class="img"></div>
<h3>標題8</h3>
<p>描述8</p>
</li>
<li>
<div class="img"></div>
<h3>標題9</h3>
<p>描述9</p>
</li>
</ul>
</div>
</body>
</html>
代碼預覽地址：http://mycoding666.coding.me/task/renwu/%E5%93%8D%E5%BA%94%E5%BC%8F%E9%A1%B5%E9%9D%A2/index.html
寫響應式頁面需要注意的地方：
1、一定別忘記加<meta name="viewport" content="width=device-width, initial-scale=1.0"> 這個語句；
2、有些寬度不能寫死；（可使用百分比的形式）
3、懂得使用max-width 及margin: 0 auto;
4、有時我們不得不寫兩個樣式來應對；
5、media查詢樣式記得寫后面，要不然會被覆蓋；
6、對于圖片 可采用 max-width:100% 簡單粗暴的避免在移動端出現滾動條（為了防止圖片變形，可再加上height: auto;）；當然，有的圖片也需要單獨做響應式處理的，后面我會專門寫一篇這樣的文章。
其他補充：圖片寬度100%，頁面加載時會存在高度塌陷的問題。 可以用padding-top設置百分比值來實現自適應。padding-top = (Image Height / Image Width) * 100% 原理：padding-top值為百分比時，取值是是相對于寬度的。
最后：剛剛查Bootstrap相關資料時，了解到其實還有前端響應式框架的，比如比較知名的Foundation。
- Foundation 官網： http://foundation.zurb.com/
- Foundation 中文網：http://www.foundcss.com/
**本文版權歸本人即簡書筆名：該賬戶已被查封 所有，如需轉載請注明出處。謝謝！ *
