rem布局 ​

解决问题：

• 页面布局文字能随着屏幕大小变化而变化
• 流式布局喝flex布局主要针对于宽度布局，而高度是固定尺寸
• 可以使得屏幕大小发生变化的时候，元素的宽度以及高度等比例缩放

rem基础 ​

rem（root em）是一个相对单位，类似于em，em是相对与父元素字体的大小，而rem是相对于html元素文字的大小

rem优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小

html {
	/*html文字元素大小设定为12px*/
	font-size: 12px;
}
/*此时div的字体大小就是24px*/
div {
	font-size: 2rem;
}

媒体查询 ​

css3的新语法

• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式
• 当充值浏览器大小的过程中，页面也会根据浏览器的宽度喝高度重新渲染页面
• 目前针对很多苹果手机，安卓手机，平板等设备都用得到多媒体查询

媒体查询语法 ​

@media mediatype and|not|noly (media feature) {
	css-code;
}

/* media feature =》 max-width: 976px*/

• 用@media开头
• mediatype媒体类型
• 关键字and not noly
• media featrue媒体特性，必须有小括号包含

mediatype查询类型，将不同的终端色划分成不同的类型，称为媒体类型

关键字，将媒体类型或多个媒体特性链接到一起作为媒体查询的条件

• and：可以将多个媒体特性链接到一起，相当于”且“的意思
• not：排除某个媒体类型，相当于“非”的意思，可以省略
• noly：指定某个特定的媒体类型，可以省略

媒体特性 ​

每种媒体类型都具备各自不同的特性，根据不同媒体类型和媒体特性设置不同的展示风格

注：使用时需要添加小括号

为了防止混乱，媒体查询我们要按照从小到大或者从大到小顺序来书写。而从小到大书写，代码可以更加简介

媒体查询+rem ​

• rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸

• 媒体查询可以根据不同设备宽度来修改样式

• 媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

适配方案 ​

1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候 ，等比适配当前设备
2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做寸尺单位，当html字体大小变化时，元素寸尺也会发生变化，从而达到等比缩放的适配效果

动态设置html标签font-size大小 ​

1. 假设设计稿是750px
2. 假设我们把整个屏幕划分为15等分，(划分标准不一，可以是20份也可以是10等分)
3. 每一份作为html字体大小，这里就是50px
4. 那么在320px设备的时候，字体大小为320/12就是21.33px
5. 用我们页面元素的大小除以不同的html字体大小会发现它们比例还是相同
6. 比如我们以750为标准设计稿
7. 一个100*100像素的页面元素在750屏幕下，就是100/50，转换rem：2rem * 2rem比例是1比1
8. 320屏幕下，html字体大小为21.33，则2rem=42.66px，此时宽和高都是42.66，但是宽和高的比例还是1比1
9. 但是已经能实现不同屏幕下，页面元素盒子等比例缩放的效果

元素大小取值的方法

• 最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
• 屏幕宽度 / 划分的份数 就是html font-size的大小
• 或者：页面元素的rem值 = 页面元素值（px）/ html font-size 字体的大小

px转rem工具 ​

vscode转换rem插件，插件名称cssrem

• 使用时，先设置屏幕大小