您的位置：首页 > Web前端 > CSS

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

2017-11-01 14:45 525 查看
第一：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; }
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html 字体 rem em
相关文章推荐
新的分享
章节导航