移动端开发的两种主流方案之一：响应式布局兼容
- 内容没有受到(屏幕宽度)明显影响时，自适应宽高即可
- 内容受到明显的影响时，改变布局，来保证内容的清晰
响应式布局：用于解决不同浏览器，不同分辨率及不同设备的不同显示效果
优点：
- 面对不同分辨率的设备灵活性很强
- 能够快捷的解决多设备显示适应的问题
缺点：
- 兼容各种设备工作量大，效率低，页面加载时间长
- 一定的程度上，会改变网站原有的布局结构，可能会出现用户混淆问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
/*width:600px;*/
/*height: 600px;*/
/*border: 1px solid;*/
/*开启合模型*/
display: flex;
/*两端对齐*/
justify-content: space-around;
/*换行*/
flex-flow: wrap;
}
.box1{
width:100px;
height: 100px;
background-color: #00BCD4;
border-radius: 50%;
text-align: center;
line-height: 100px;
}
/*@media 声明关键字
*screen 设备类型
*and 关键字（连接 指定）
* () 媒体特性(就是屏幕尺寸)
* {} 指定的样式
*
当screen 的屏幕尺寸符合 指定的尺寸时，执行指定的样式
max-width：屏幕小于等于指定的尺寸时触发 (最多)
min-width：屏幕大于等于指定的尺寸时触发 (最少)
声明要写在元素之后 这个顺序很总要 在前在后有优先级 下面优先级高
max min同时使用时min-width500px大于500px max600px 小于600px
*/
/*外联写的时候先引入正常时候的样式*/
@media screen and (max-width:700px) {
.box1{
width:40%;
/*相对于父级*/
height: 100px;
background-color: #00BCD4;
border-radius: 50%;
text-align: center;
line-height: 100px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
</div>
</body>
</html>
