为了账号安全,请及时绑定邮箱和手机立即绑定

1rem为何不能为1px

标签:
Html/CSS
  • 在使用rem做适配时,大多设定在设计稿尺寸时,1rem=100px。这样在做开发时,css尺寸属性写为
    (设计稿尺寸/100) rem

  • 然后我就在想为什么不设定在设计稿尺寸时,1rem=1px,开发时尺寸写为设计稿尺寸 rem,岂不是更方便,不用写那么多 0.

在具体实践之后发现,元素的的css属性除了字体大小之外,实际效果都是1rem=12px。

/* 1rem = 1px */div{    font-size: 20rem;      /*效果: font-size: 20px; */
    margin-top: 50rem;     /*效果: fmargin-top: 600px; */
    padding: 1rem;         /*效果: padding: 12px;  */}

在请教别人之后才知道,当前浏览器设定的最小字体大小为12px,所以浏览器自动把html{font-size: 1px} 识别为html{font-size: 12px},所以效果也就是1rem = 12px

调整浏览器最小字体大小以后,也验证了以上原因是正确的。

所以设定为1rem=100px,也是最简便的开发方式。

font-size属性正常布吉岛为啥。。。。



作者:漓漾li
链接:https://www.jianshu.com/p/1b94fa1fe94c


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消