美文网首页
移动端em与rem区别

移动端em与rem区别

作者: JamHsiao_aaa4 | 来源:发表于2018-03-07 11:57 被阅读0次

    rem与em都是相对单位,我们使用它们的目的就是为了适应各种手机屏幕。

    rem是根据html根节点来计算的,而em是继承父元素的字体。比如下面一个demo


    第一个span继承了它的父元素div的大小,所以是14px,第二个span是通过html来计算的,所以是40px。第一个img继承的body,第二个img根据html来计算。通过这个简单的例子我们得知上面的结论是正确的。所以我们可以通过下面这种比例来对不同的手机屏幕做适配。


    比如iphone5上的rem基值为32px,则渲染一张64*64px的div,则用2rem*2rem渲染,换算公式如下————

    px/rem = 基值

    对于一些固定的元素,我们不推荐使用rem,而改为使用px去确保在同一屏幕上保持一致,比如字体font-size,这个更趋向于阅读的实用性,不适合排版布局。

    em 单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。

    相关文章

      网友评论

          本文标题:移动端em与rem区别

          本文链接:https://www.haomeiwen.com/subject/rpjrfftx.html