css里px、em、rem的区别和应用

最新推荐文章于 2024-05-22 19:34:46 发布

Clay1103

最新推荐文章于 2024-05-22 19:34:46 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/wzzz1/article/details/78413987

版权

第一：px，em，rem的区别在哪？

Px是一个绝对字体大小
em则是基于基数（比如：1.5em）来计算出来的相对字体大小。这个基数是需要乘以当前对象从其父级遗传字体大小。
rem是基于根节点（比如html）的字体大小进行计算的。

先说em 如果你的默认父级容器字体为16px ，那么2em=2*16px

<div class="parent" style="font-size: 16px">
    <p style="font-size: 2em">我是em测试</p>
</div>

rem默认字体大小是依据你网站当前访问时所使用的浏览器或者其他设备来决定的,特别适合响应设计，受到了移动设计的追捧

<!DOCTYPE html>
<html style="font-size: 14px">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="parent" style="font-size: 16px">
    <p style="font-size: 2em">我是em测试</p>
    <p style="font-size: 2rem">我是rem测试</p>
</div>
</body>
</html>

在网上看到
为了更方便的进行计算转换，你可以把默认字体大小设置成62.5%或者是10px方便了计算
大多数浏览器（不包括ie8以下）都支持rem单位的字体大小
如果想支持可以，如下：

html { font-size: 62.5%; }
p { font-size: 15px; font-size: 1.5rem; }

Clay1103

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css里px、em、rem的区别和应用

第一：px，em，rem的区别在哪？Px是一个绝对字体大小 em则是基于基数（比如：1.5em）来计算出来的相对字体大小。这个基数是需要乘以当前对象从其父级遗传字体大小。 rem是基于根节点（比如html）的字体大小进行计算的。先说em 如果你的默认父级容器字体为16px ，那么2em=2*16px<div class="parent" style="font-size: 16px">
复制链接

扫一扫