本文主要是介绍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中引入】
这篇关于CSS面试题：说一说对rem的理解？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
