前端的rem的用法

最新推荐文章于 2024-07-25 15:19:10 发布

幸运(^-^)

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量4.6k

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/weixin_55804002/article/details/121129280

版权

1.概念

首先来说说rem的概念，rem就是根元素的字体大小单位。

2.简单讲讲rem的概念

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			html {
				font-size: 30px;
			}

			.div1 {
				font-size: 1rem;
			}
            .div2{
                font-size: 30px;
            }
		</style>
	</head>
	<body>
        <div>123</div>
        <div>456</div>
	</body>
</html>

在这个代码中html就相当于根元素，在根元素上设置了一个字体大小，但是单位为px，而在下面的div1中也同样设置了字体大小单位为rem,我们来看看此时div中的字体的大小。

我们可以清楚的看到两个div中的字体是一样的大小。接下来我们将div1中的属性调为2rem，我们来看看字体的大小。

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			html {
				font-size: 30px;
			}

			.div1 {
				font-size: 2rem;
			}
            .div2{
                font-size: 30px;
            }
		</style>
	</head>
	<body>
        <div>123</div>
        <div>456</div>
	</body>
</html>

此时我们可以看到div1的字体变大了而div2的字体没有变大，此时我们在将div2的字体调为60px，我们在看看他们的大小。

我们可以清楚的看到它们的大小是一样的，所以可以得出rem就是与根元素的比例，例如根元素的文字大小为30px而div中的1rem也为30px，2rem就为60px。

3.总结

rem就是与根元素(html)的比例。

幸运(^-^)

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
前端的rem的用法

1.概念首先来说说rem的概念，rem就是根元素的字体大小单位。2.简单讲讲rem的概念<html> <head> <meta charset="utf-8"> <style type="text/css"> html { font-size: 30px; } .div1 { font-size: 1rem; } .div2{ font-.
复制链接

扫一扫