1.媒体查询
概念：为不同尺寸的屏幕设置不同的 CSS 样式
当屏幕符合时，会使用里面的样式，如果外部设置过，则会替换里面相同的样式，不同的样式会继承
@media 常用参数
| 属性名 | 作用 |
|---|---|
| width、height | 浏览器可视宽度、高度 |
| device-width | 设备屏幕的宽度 |
| device-height | 设备屏幕的高度 |
（1）用法一
/* 屏幕小于 300 px */
@media screen and (max-width: 300px) {
div {
background-color:red;
}
}
/* 屏幕大于 300 px */
@media screen and (min-width: 300px) {
div {
background-color:yellow;
}
}
/* 屏幕小于 300px 大于 200px */
@media screen and (min-width: 200px) and (max-width: 300px){
div {
background-color:blue;
}
}
（2）用法二
<style media="(min-device-width:200px) and (max-device-width:300px)">
div {
background-color:blue;
}
</style>
<style media="(min-device-width:300px) and (max-device-width:400px)">
div {
background-color:yellow;
}
</style>
（3）用法三
<link href="css/test1.css" rel="stylesheet"></link>
// 当浏览器宽度大于 200px 时引入 test2.css
<link href="css/test2.css" rel="stylesheet" media="(min-width:200px)"></link>
2.flex 弹性布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
任何一个容器都可以指定为Flex布局
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
3.rem布局
概念：指相对于根元素的字体大小的单位
区别：em（指相对于父级的字体大小的单位）
（1）用法
html{
font-size:10px;
}
div {
font-size:1rem;
}
(2) 动态适配
可以加监听动态修改
// 其实就是根据设备宽度修改根元素 font-size 大小
// 假设设计稿是iphone6 16px
let baseDevice = 375 // iphone6 设备宽度
let baseFontSize = 16 // 设计稿 16px
let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom=document.documentElement
htmlDom.style.fontSize=(htmlWidth/baseDevice)*16+'px';
4.百分比布局
使用百分比作为单位进行布局，可以很好的自适应全部设备，百分比参考的是父级元素的宽度，无父元素则相对于浏览器窗口的宽度。（缺点是计算困难）
| 子元素 | 父元素 |
|---|---|
| width | 基于父级的width |
| height | 基于父级的height |
| margin（top,right,bottom,left） | 基于父级的width |
| padding（top,right,bottom,left） | 基于父级的width |
| left,top,right,bottom | 基于父元素的width，height，width，height |
| font-size | 基于继承得到的font-size |
| line-height | 基于当前字体的font-size |
| transform(left, top) | 基于自身的left， top |
5.自适应布局
局部伸缩
例子：两端宽度不变，中间宽度随浏览器宽度改变
<style>
#father{
display: flex;
text-align: center;
}
#father div:nth-child(1){
flex: 0 0 20px;
background-color: yellow;
}
#father div:nth-child(2){
flex: 1 1 auto;
background-color: blue;
}
#father div:nth-child(3){
flex: 0 0 20px;
background-color: red;
}
</style>
<body>
<div id="father">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
