谈谈rem与em理解与换算

原创 尧先森 随笔 日记 261阅读 26 天前 举报

作为一个做PC端很久的老鸟,突然有一天去做移动端的页面,PX肯定是不能完全满足了,于是就选择了rem这个单位。
做微信页面的时候直接引用的是淘宝布局的一个JS,在编辑器上设置换算的单位,然后就开始干活了,虽然开始看了一些理解,会用了,感觉自己萌萌哒了。
知道今天去了一家公司去面试的时候,考官突然问我关于rem,em的单位,我大体还记得大概意思,但是具体的换算突然忘了。突然发现前端做了两年了,很多东西只会用,但是底层原理却不是很理解,基础知识不够牢固,所以痛定思痛,每周写一篇技术博文,便于自己理解一直知识和牢记一个知识,今天就以rem开头了。
rem和em都是根据父元素或者根元素的font-size来换算的,不同的是em是根据父元素的大小来换算的,因为它具有继承父元素大小的功能,所以如果层级多了就会很难去换算,这也是用em不多的原因。
举个例子,一般的浏览器的font-size是16px, 也就是默认来说1em=16px;

引用内容
body font-size:16px
div font-size:2em --->32px
span 0.5em --->16px

em的换算是根据 父元素的font-size来换算的,所以层级越深,em的换算也就越难。
再来说一下rem ,rem是我们在移动端常用的一个单位,浏览器默认样式为16px,一般来说也就是html{font-size:16px} 此时也就是1rem=16px;
就说一点实际的干货吧,一般来说UI出的设计图都是以苹果6的标准来设计,当然也有的以苹果5的标准来,也就是750 和 640为标准的设计图,我们公司是以750位标准的,所以我就以750的设计图为标准来说一下。
首先拿到设计图,我们就需要确认好换算的比例,一般来说浏览器的默认为1rem=16px,也就是以为着浏览器被分为了750/16=46.875 分,此时就是46.875rem=750px
首先这里有两个坑,第一换算用16那肯定是不好换算的,因为麻烦,第二很多浏览器默认的最小字体是12px 也就意味着在375的屏幕的时候 1rem=8px,然而它其实显示的尺寸为12px,所以这种方式并不合适。
我是把浏览器分为了10份(之所以分为10份,是因为我用了淘宝手机布局的JS,所以就顺便讲一下分为10份,完全是意外,因为一般会分为7.5份,因为便于计算),也就是750/10 = 75 ;然后设置html{font-size:75px},此时也就是1rem=75px; 因为rem是根据根节点html来设置的。那么显然当设计图为100px的时候,也就是用100/75=1.33333rem。
这是在750的设备上所设置的,这是苹果的物理尺寸,苹果的实际设备显示尺寸是375。也就是750/2=375; 不过这没什么影响,因为只要我们在不同的分辨率上对根节点html的font-size设置好合理的大小就行。这时候我们以css的方式去改变根节点的HTML大小,需要用到媒体查询,也就响应式:

引用内容
@media screen and (min-width: 320px){html{font-size: 32px}} 320 / 750 75 = 32px
@media screen and (min-width: 360px){html{font-size: 36px;}} 360 /750 = 36px
@media screen and (min-width: 375px){html{font-size: 37.5px ;}} 375 / 750 = 37.5px
以此类推
结论就是:
分辨率 / 设计图px
1rem的px = 你所要设置的根节点的px值

根据不同的分辨率,然后提前设置好根节点的font-size的值。这样在布局的时候,用所量的尺寸/75 就可以得到你所要的rem。然后你就可以得到一个根据屏幕大小而页面响应式的变大变小的 移动端响应式网页。
rem还有一种JS的换算,这个就不讲了,原理上差不多,不懂的也可以去百度,然后去理解理解,或则去研究手淘JS的源码。
此上为个人理解,如果错误,求大神指点。

评论 ( 1 )
最新评论
UncleLance 22 天前 1F

现成的WEB开发视频在此~~
CSS3带过渡动画效果的垂直导航菜单: http://www.iqiyi.com/w_19rwrlxval.html
觉得好的可以进qq群:143046757一起交流哦~