根元素 font-size 的改变，带来的问题

最新推荐文章于 2024-05-17 14:33:55 发布

Mrs_Mind

最新推荐文章于 2024-05-17 14:33:55 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： h5 前端

本文链接：https://blog.csdn.net/Mrs_Mind/article/details/102574642

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

原始的 rem ，是这样计算的。rem 值 = px值 / 16（浏览器 font-size 默认值）;

为了更好的使用 rem ，我们要设置文档根元素的 font-size 值（通常是 font-size = 100px）。

html{
  font-size: 100px;
}

此时 rem 的计算方法是：px 值 / 100 （此时浏览器的根元素 font-size = 100px）;

header{
  width: 100%;
  height: 80px;
}

/**********等价于************/

header{
  width: 100%;
  height: .8rem;
}

此时很有可能造成某些意想不到的问题：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
*{
	padding: 0;
	margin: 0;
}
html{
	font-size: 100px;
}
div{
	width: 26px;
	height: 26px;
	background-color: yellow;
}
div img{
	width: 26px;
	height: 26px;
}
</style>
<body>
	<div>
      <img src="./xin.png" />
	</div>
</body>
</html>

此时按正常的想法来就是，xin.png应该在div之内。

可是因为根元素的 font-size 值设为了 100px，xin.png 出现在了 div 之外。

此时只要把 div 的 font-size 值设为 0 就好了

Mrs_Mind

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
根元素 font-size 的改变，带来的问题

原始的 rem ，是这样计算的。rem 值 = px值 / 16（浏览器 font-size 默认值）;为了更好的使用 rem ，我们要设置文档根元素的 font-size 值（通常是 font-size = 100px）。html{ font-size: 100px;}此时 rem 的计算方法是：px 值 / 100 （此时浏览器的根元素 font-size = 100px）...
复制链接

扫一扫

专栏目录