CSS之rem如何正确的使用！

最新推荐文章于 2024-05-16 00:31:06 发布

亚历山大海

最新推荐文章于 2024-05-16 00:31:06 发布

阅读量1.6k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_44936767/article/details/108104451

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。

浏览器默认的字号16px

如果不定义html根元素设定的font-size的px值。默认就是16px;
为了方便计算，时常将在元素中设置font-size值为62.5%:

62.5%是10/16*100值，等同于当前的px值为10px;

eg:现在我想设置一个字号为16x的字体，转化rem为多少？
16px = 16/10=1.6rem
根据当前所设定px的大小除以当前html根元素设定的10px

另外注意头部最好申明下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=320,user-scalable=no" name="viewport">
<title>rem</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
html{
   font-size:62.5%;
}
.egrem{font-size: 1.6rem;}
.egremt{font-size: 2.0rem;}
</style>
</head>
<body>
<div class="egrem">16PX的REM</div>
<div class="egremt">20PX的REM</div>
</body>

在这里插入图片描述

亚历山大海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之rem如何正确的使用！

rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。浏览器默认的字号16px如果不定义html根元素设定的font-size的px值。默认就是16px;为了方便计算，时常将在元素中设置font-size值为62.5%:62.5%是10/16*100值，等同于当前的px值为10px;eg:现在我想设置一个字号为16x的字体，转化rem为多少？16px = 16/10=1.6rem根据当前所设定px的大小除以当前html根元素设
复制链接

扫一扫