响应式布局介绍
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式布局介绍相关的知识，希望对你有一定的参考价值。
1、模块中内容：挤压（拉）布局不变
2、模块中内容：换行铺平
3、模块内容：删减（增加）
4、模块位置变换（布局改变）
5、模块展示方式改变：隐藏（展开）（布局改变）
6、模块数量改变：删减（增加）（布局改变）
响应式布局的设计：
设计特点：
1、面对不同分辨率设备灵活性强
2、能够快捷解决多设备显示适应问题缺点：
1、兼容各种设备工作量大，效率低下
2、代码累赘，会出现隐藏无用的元素，加载时间加长
3、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
4、一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
实现小例子：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
width: 100%;
}
section{
max-width:1200px;
background: #ccc;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
div{
margin-bottom: 20px;
}
@media all and (min-width:1024px) and (max-width:1200px){
div{
width: 23%;
}
}
@media all and (min-width:750px) and (max-width:1023px){
div{
width: 32%;
}
}
@media all and (min-width:480px) and (max-width:749px){
div{
width: 48%;
}
}
@media all and (min-width:320px) and (max-width:479px){
div{
width: 90%;
}
}
</style>
</head>
<body>
<section>
<div >
<img src="./img/4.jpg" >
</div>
<div >
<img src="./img/4.jpg" >
</div>
<div >
<img src="./img/4.jpg" >
</div>
<div >
<img src="./img/4.jpg" >
</div>
<div >
<img src="./img/4.jpg" >
</div>
<div >
<img src="./img/4.jpg" >
</div>
<div >
<img src="./img/4.jpg" >
</div>
<div >
<img src="./img/4.jpg" >
</div>
<div >
<img src="./img/4.jpg" >
</div>
<div >
<img src="./img/4.jpg" >
</div>
</section>
</body>
</html>
以上是关于响应式布局介绍的主要内容，如果未能解决你的问题，请参考以下文章