rem适配布局

rem适配布局

• rem单位
  rem是一个相对单位，类似于em，em是父元素字体大小，而rem单位的基准是相对于html元素的字体大小。
  它的优点是可以通过html林、面的文字来改变页面中元素的大小，可以整体控制。
• 媒体查询
  @media可以针对不同的屏幕尺寸设置不同的样式
  

关键字将媒体类型或多个媒体特征连接到一起为媒体查询的条件

• and 多个条件连接到一起，相当于“且”的意思
• not：排除某个某体类型，相当于“非”的意思
• only 指定某个媒体了类型
  媒体特征

值	解释说明
width	定义设备中可见区域的宽度
min-width	定义输出设备中页面最小可见区域的宽度
max-width	定义输出设备中页面最大可见区域的宽度

/*屏幕宽度大于等于320px*/
 @media screen and (min-winth: 320px) {
        html {
            font-size: calc(320px / 15);
        }
}