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 代码 */
}