响应式布局和自适应布局初始理解前言：之前的流式布局和flex布局主要是固定高度设计宽度布局，切换设备的时候高度是固定不

前言：

之前的流式布局和flex布局主要是固定高度设计宽度布局，切换设备的时候高度是固定不变的，字体大小也是不能根据设备变化而变化的。看起来就不是很符合审美要求。
rem的出现就可以实现屏幕变化时元素高度和宽度等比例缩放。

一.em与rem

1. em:相对于父元素的font-size来说的。

例如：父元素的font-size为12px。子元素width: 10em;相当于120px。

2. rem是相对于html的字体大小而言的

二.媒体查询

@media screen and (max-width:800px)

@media screen and (max-width:539px){
    body{
        background-color:blue;
    }
}
@media screen and (min-width:540px){
    body{
        background-color:green;
    }
}
@media screen and (min-width:970px){
    body{
        background-color:red;
    }
}

因此，rem配合媒体查询可以实现元素动态变化。