header_v0.7.32

聊聊 px em rem 在WEB前端开发中的区别

1年前发布

原创文章 / 多领域 / 观点
宁静飘雪 原创,如需商业用途或转载请与宁静飘雪联系,谢谢配合。

我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em、rem便开始流行起来。

我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em、rem便开始流行起来。


为什么我们需要使用相对字体大小呢?

    或 许我们最能直接想到的一点就是它关于CSS3的一些东西。很好理解的是它是一种字号计算方式,尤其是当你在为多种分辨率进行字号计算的时候。想想要在手机 上实现字体变大或者变小的时候,你不得不要反复重新计算对象的字体大小,这是相当耗时间的。这个时候相对字体大小的设置才凸显出了它的有用之处。当你要在 不同的样式结构中进行设置字体大小的时候,使用em或者rem能够让你针对一个具体的视屏进行字体大小的增大或者减小。


那么我们先来简要了解一下,px、em、rem这几个单位的意义和区别。

    px,pixel像素的简称,是屏幕上显示数据的最基本的点,是一个绝对字体大小。

    em,font size of the element,是指相对于父元素的字体大小的单位。

        我们可以举个例子,来说明:

        我们设定 body{ font-size:10px;} 那么body的子元素div的字体大小为20px,我们就可以用em来做单位就是2em。

        2em=父级字体大小10px*2=20px

        不过,这有个问题就是在css中想要知道当前元素的字体大小所遗传的是哪个父级元素的字号。因此,rem的出现就很好的解决了这个问题。rem是基于根节点(比如html)的字体大小进行计算的。

    rem,font size of the root element,是指相对于根元素的字体大小的单位。

        首页我们要知道对于桌面浏览器的默认字体大小为16px下面我们也来举例说明

        为了方便计算我们可以设置根元素字体大小为10px,或者可以用62.5%(10/16=0.625)来表达。

        html{ font-size:62.5%; 10/16=0.625}

        那么:div{ font-size:2rem; /*即20px*/}


rem的浏览器支持
    目前大多数浏览器都支持rem单位的字体大小,不过,要想兼容IE7和IE8,你还是需要使用px来做单位。写法如下:
    html { font-size: 62.5%; }

    p { font-size: 15px; font-size: 1.5rem; } /* =15px */   






6
    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功