码迷,mamicode.com
首页 > 其他好文 > 详细

REM

时间:2019-01-09 16:40:53      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:现在   遇到   注意事项   order   原因   strong   工具   节点   margin   

原理:针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px。那么12px=0.75rem,10px=0.625rem。为了简化font-size的换算,需要在css中的html选择器中声明font-size=62.5%,这就使rem值变为 16px*62.5%=10px, 这样12px=1.2rem, 10px=1rem, 也就是说只需要将原来的px数值除以10,然后换上rem作为单位就行了。

当我们在根节点<html>上设置了font-size基准值以后,在文档中有使用rem单位的属性值都是相对于根节点font-size的一个相对值。比如说一些元素的属性如width,height,margin等。也正是这个原因,现在很多网站的移动端网站都在使用rem单位作为适配工具。

注意事项:

1.整体的布局还是使用百分比

2.使用rem的最佳场景是,遇到例如多列带有图片的列表,常常需要图片固定宽高比

3.研究了一些网站,比如淘宝,对字体字体一般情况建议使用px

4.出现1px像素线的地方,仍旧使用border-width:1px;而不是border-width:.1rem

REM

标签:现在   遇到   注意事项   order   原因   strong   工具   节点   margin   

原文地址:https://www.cnblogs.com/mengdiezhuangzhou/p/10245160.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!