什么是响应式布局？pc端的页面在移动端打开，被压缩到看不清楚，响应式布局可以让他宽度适应移动端或者换成更适合移动端的布局，简而言之，响应式布局是在哪里就说哪里方言。
组成部分
@media 屏幕设备 and (屏幕范围){元素:声明;}
屏幕设备
设备类型有很多，aural、braille、handled、print(打印预览图)……等，最常见的是screen（显示器，笔记本，移动设备等），我们在代码中使用all来替指所有。
and
and是一个关键字，意思是"和"，同类型的还有not(排除某种设备) only(限定某种设备)
屏幕范围
- (min-width:数值px;)允许的最小值是该数值，要求是大于等于该数值；
- (max-width:数值px;)允许的最大值是该数值，要求是小于等于该数值。
小练习
当屏幕小于600px时，字体是红色的，当屏幕大于600px小于1000px时，字体是蓝色，当屏幕大于1000px时，字体是绿色。
在这个练习中，我们需要注意哪些方面呢？
- and前后都要有空格；
- 不能根据min和max的字面意思来设置范围，min是要求大于等于，max是要求小于等于；
- 同时出现(max-width:600px) 和(min-width:600px)时，600px的时候遵循就近原则，上面的声明被下面的覆盖。
tips
因为px物理像素在不同型号和分辨率的屏幕上会有差别，所以移动端单位使用rem和em，其中em受父元素影响，不能一直固定，波动较大。rem受根元素html的影响，我们更多的选择rem，在使用前先设置html的字体大小，一般使用font-size: 100px;为基础。可以安装px to rem & rpx & vw (cssrem)扩展小程序来更便捷的设置数据大小。
