CSS面试题：说一说对rem的理解？

概述：

页面响应式用 rem 实现【根据设备屏幕宽度改变根元素fontsize】，设备自适应用 媒体查询 实现【根据设备屏幕宽度控制哪些样式class生效】

媒体查询实现：【页面结构需要变化时使用】

1、link元素中的CSS媒体查询【一般用于Js项目】

<!-- pc端，设备屏幕宽度大于等于901px时，pc端样式文件class生效，控制某些元素显示隐藏、字体rem值改变等 -->

<link rel="stylesheet" media="(min-width:901px)" href="./css/pc/index.css">

<!-- 移动端，设备屏幕宽度小于等于900px时，移动端样式文件class生效，控制某些元素显示隐藏、字体rem值改变等 -->

<link rel="stylesheet" media="(max-width:900px)" href="./css/pe/index.css">

2、样式表中的CSS媒体查询【一般用于Vue项目】

<!-- pc端 -->

@media screen and (min-width:901px){

body {

background-color: red;

}

}

<!-- 移动端 -->

@media screen and (max-width:900px){

body {

background-color: green;

}

}

rem原理：

百分比布局可实现响应式布局，而rem相当于百分比布局。无论设备可视窗口如何变化，始终设置rem为width的1/n，即实现了百分比布局。

rem公式：

方案一：1rem=100px【方便计算】

html.fontSize = 1rem = 设备屏幕宽度/(设计稿宽度/100)，

1、分析阶段 --- 让设备屏幕宽度等于设计稿宽度，则1rem=100px，此时方便计算、编写设计稿元素宽度对应的rem。

2、执行阶段 --- 让设备屏幕宽度等于Js获取的设备屏幕宽度

方案二：1rem = 设计稿宽度/份数【需使用cssrem插件来方便计算】

1、分析阶段 --- html.fontSize = 1rem = 设计稿宽度/份数

2、执行阶段 --- html.fontSize = 1rem = 设备屏幕宽度/份数

3、页面元素的rem：nrem = 设计稿元素宽度/1rem

rem实现：

1、分析阶段，先根据设计稿宽度px计算1rem，再根据设计稿元素宽度px计算、编写页面元素的rem

2、执行阶段，Js先自动根据设备屏幕宽度计算1rem，再将1rem对应的px赋值给Html的fontsize，再根据编写好的页面元素的rem，计算实际页面元素的px

rem工具：

分析阶段：cssrem插件，把页面元素px自动计算成rem。需先在VSCode的配置文件中，根据设计稿宽度px计算1rem。

执行阶段：flexible.js库，将设备屏幕宽度分成了10份，根据设备屏幕宽度自动计算1rem。【Js项目在head中引入，Vue项目在main.js中引入】