请老师解答代码中的问题
来源：2-3 简单适配实现
weixin_慕村1291783
2020-12-10 15:46:27
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 40px;
}
.box {
width: 100%;
height: 2000px;
background-color: pink;
}
.header {
width: 100%;
height: 5rem;
/* 高度100px 通过cssrem插件配置了font-size是20px
但是在页面中又设置了html的font-size值为40px，通过自动转化为什么还是5rem 自己页面中写的html的字体大小为什么就无效了
这样的话 我怎么通过JS动态获取html的字体大小呢*/
}
</style>
</head>
<body>
<div class="box">
<div class="header"></div>
</div>
</body>
</html>
1回答
-
好帮手慕慕子
2020-12-10
同学你好，对于你的问题解答如下：
因为编辑器中书写代码时，将px转成rem，是根据cssrem插件配置的font-size:20px进行计算的，与当前页面中html元素设置的font-size大小无关，所以100px转成rem值为5rem。
当你在浏览器中打开页面时，元素的尺寸是以rem作为单位的，才会根据当前页面的html元素设置的font-size大小，重新计算元素的尺寸。示例：
同学代码中设置了html的font-size为40px; div设置高度为5rem， 打开页面后，重新计算元素的尺寸大小为200px，如下图所示：
可以通过一个不常用的方法getComputedStyle（了解下即可），获取当前html设置的字体大小。示例：
视频中老师讲解的意思：并不是说通过js获取html的字体大小，而是通过屏幕宽度计算当前html的gont-size值，这样在改变了屏幕宽度后，会重新设置html的font-size值，那么以rem为单位的元素也会重新计算尺寸，这样就实现了元素在不同的屏幕上都能正常布局。同学可以回顾视频，加深理解。
祝学习愉快~
0
相似问题