响应式页面简单示例
刚写了一个如上图所示的响应式页面，代码如下：
<!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/
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
