您的位置：首页 > 其它

px和em和rem的关系以及换算

2016-11-18 15:06 218 查看
传统页面元素之间度量单位一般以 px 屏幕像素作为单位，但是并非所有的页面像素都是恒定的，比如移动设备就包含320px、375px、425px。。。不可能使用像素为每套设备设计一个页面，当然你说可以用百分比来设计，你愿意去计算每个元素的百分比我也不反对。em也有类似的通病，它是个相对于父级font-size的相对单位，设置em就必须知道父级元素的font-size。这时rem就产生了，rem相对于html的font-size作为参照单位。

默认1em=1rem=16px

参照值(C=16)

指定参照的font-size的值

font-size=10px

参照值(C=10)

换算方法：设X为当前px的值，Y为em/rem的值

(Y)em / (1)em = (X)px / (C)px    =>    求em ：Y=X/C 或 求px：X=C*Y
(Y)rem / (1)rem = (X)px / (C)px    =>  求rem：Y=X/C 或 求px：X=C*Y


所以px和em和rem换算如下:

例:

<body style="">
<style>
html{
font-size:20px;
}
</style>
<div style="width:5rem;height:5rem;font-size:5rem;background:green"> <!--这div宽将是100px X=C*Y=20px*5rem=100px-->
<div style="width:.5em;height:.5em;background:black"> <!--这div宽将是 X=C*Y=100px*0.5em=50px-->

</div>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航