rem原理和@media媒体查询

rem用于移动端响应布局
rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小

//html
<meta name="viewport"
          content="width=device-width, 
          user-scalable=no,
          initial-scale=1.0, 
          maximum-scale=1.0, 
          minimum-scale=1.0"/>
//缩放比例1.0
//css
html{   //根元素设置100px
 font-size: 100px;
}
//js
//单位换算
//真实宽度/640=真实字号/100;
//真实字号=100*(真实宽度/640)
const viewScale = document.documentElement.clientWidth / 640;
document.documentElement.style.fontSize = 100 * viewScale + 'px';
所有css中，px换成以rem为单位的，原大小除以100即可。

@media媒体查询
@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利
媒体类型

• all 用于所有设备
• print 用于打印机和打印预览
• screen 用于电脑屏幕，平板电脑，智能手机等。（最常用）
• speech 应用于屏幕阅读器等发声设备

媒体功能

• max-width 定义输出设备中的页面最大可见区域宽度
• min-width 定义输出设备中的页面最小可见区域宽度

实例

@media screen and (max-width: 300px) {//文档宽度小于等于300px时body背景是亮蓝色
    body {
        background-color:lightblue;
    }
}

@media screen and (min-width: 300px){//文档宽度大于等于300px时body背景是亮蓝色
    body {
        background-color:lightblue;
    }
}

@media screen and (min-width:300px) and (max-width:500px) {//文档宽度大于等于300px小于等于500px时加载css代码
    /* CSS 代码 */
}