简单响应式页面实现
响应式页面简单示例
刚写了一个如上图所示的响应式页面，代码如下：
<!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/
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
作者：该帐号已被查封
链接：https://www.jianshu.com/p/e639a4333bac
共同学习，写下你的评论
评论加载中...
作者其他优质文章
