网页里px/em/rem三种单位的区别

px/em/rem的区别

在PC时代我们制作网页时候,字体的单位都是用px(Piexl)像素,很少用em和rem,它们三个都是网页的单位,有什么区别?rem是em的再发展,所以先说em和px的区别。

px

px(像素)是相对于显示器屏幕分辨率而言,显示器的分辨率有1366x768,1920x1080等等,你设定了多少像素,就占用了屏幕多少像素。网页如果使用了px作为单位,IE内核的浏览器就无法调整字体的大小,不能调整有什么好处?是为防止错位和维持美观,如果变大了,就破坏设计师所要求的视觉要求。非IE内核的浏览器如Firefox,是可以跳过css的限制来自由定义字体大小。

em

em是相对长度单位,是相对父级元素的字体大小。网页如果使用了em作为单位,则所有浏览器都可以调整字体大小,好处是方便有需求的用户,如老人和有视力障碍的人。外国网站页面基本都是以em为单位,因为有另外的原因:当地法律,他们的法律不允许你歧视有视力障碍的人,否则重罚。有兴趣的朋友可以去搜索一下这个法律规定。

em的问题是,如果页面的层级很多,层级的多次叠加,前端对字体大小的判断就容易出错,如:

<父级  1em   >    假设父级1em为20px
<子级  1.4em >     1.4em = 20px * 1.4 = 28px
<孙级  2em   >       2em = 28px *  2  = 56px

层级多了,你就看不懂2em到底会有多大?还有,假如你只想改变子级的大小,但孙级的大小也会跟着变化了。除非给孙级额外加一个class,但麻烦了。为了解决这个问题,后来的CSS3就增加了rem。

rem

rem(root em)和em的不同点就是:rem是相对HTML根元素,不再相对父级。而且很幸运的是:所有浏览器的根字体大小默认都是16px,这个是各种浏览器不兼容不统一的不幸中的大幸。修改根元素就可以成比例地调整所有字体大小,非常方便而清晰,不会有em那种混乱问题。

<根级         >       默认是 16px
<父级  1rem   >      1rem = 16px
<子级  1.4rem >    1.4rem = 16px * 1.4 =  22.4 px
<孙级  2rem   >      2rem = 16px *  2  =  32 px

我只需知道根字体大小就可以了,不再需要考虑父级的大小。我们再把根字体大小重新定义一下,使用起来更加方便,如下:

<根级         >    重定义html {font-size:62.5%;}  即:16px * 62.5% = 10px
<父级  1rem   >      1rem = 10px
<子级  1.4rem >    1.4rem = 10px * 1.4 = 14px
<孙级  2rem   >      2rem = 10px *  2  = 20px

把根大小修改成整数10,以后写数值的就很直观了,1.4=14  1.8=18  2.4=24  ....

小结

px、em、rem它们有各自的优点和缺点,不能笼统的说哪个好哪个不好,看需要而用。

在移动互联网时代下做手机端页面,似乎rem相对更实用,因为手机的分辨率千差万别,尤其是安卓系的手机。在这种情况下,网页需要做成响应式,布局、图片和文字都要响应式,rem的相对性决定了它在响应式页面里用的是最多的。

px就没用了吗?不是的,因为:一、有些地方不需要做自适应,用固定值就可以。二、通过媒体查询,可以在某个分辨率下采用某个固定值。