区别css单位px、em、rem

在对页面进行自适应时,查阅相关资料了解到,通常有两种方式将px转换为em或者rem,下面就上述三者之间的联系进行讲解:

em与px转换

一般浏览器默认1em=16px,通过设置font-size大小来代表如:16px*0.625=10px,其则代表1em=10px,直接上代码(注释的样式为浏览器默认 (1em=16px)的长宽):

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         body{font-size: 16px;}
        /*1em=10px*/
        /*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/
        #div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}
        /*#div2{width:200px;height:200px;margin:0 auto;}*/
        #div2{width:12.5em;height:12.5em;margin:0 auto;}
        /*#div3{width:480px;height:320px;margin:80px auto;}*/
        #div3{width:30em;height:20em;margin:5em auto;}
    </style>
</head>
<body>
<div id="div1" style="background:lightslategray;">
    <div id="div2" style="background: darkseagreen;"></div>
</div>
<div id="div3" style="background: deepskyblue;"></div>
</body>
</html>

结果如图所示:
在这里插入图片描述
在进行转换之前,我们一定要查看浏览器默认字体(最小)大小,如chrome浏览器,默认字体最小为12px,所以即使我们为了方便设置1em=10px,其浏览器仍旧以1em=12px计算
16px*0.75=12px=1em

 body{font-size: 12px;}
 或者{font-size: 75%;}

结果如图所示:
在这里插入图片描述

em与rem区别

rem与px,和em与px转换是一样的,二者区别在于前者默认从根元素继承,后者从父级元素继承,还是上述代码,html我们不设置font-size,其默认为16px,上代码展示(div3单位我们修改为rem):

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{font-size: 12px;}
        /*1em=10px*/
        /*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/
        #div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}
        /*#div2{width:200px;height:200px;margin:0 auto;}*/
        #div2{width:12.5em;height:12.5em;margin:0 auto;}
        /*#div3{width:480px;height:320px;margin:80px auto;}*/
        #div3{width:30rem;height:20rem;margin:5rem auto;}
    </style>
</head>
<body>
<div id="div1" style="background:lightslategray;">
    <div id="div2" style="background: darkseagreen;"></div>
</div>
<div id="div3" style="background: deepskyblue;"></div>
</body>
</html>

结果如图所示:
在这里插入图片描述
从上述我们可以看到,div3单位设置rem后,其并没有根据body设置而变化,仍旧默认font-size:16px。所以为了方便,我们可以设置16px*1.25=20px,其代表1em为20px,同样有利于我们计算。

  • 14
    点赞
  • 76
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值