css中px,em和rem的区别

  今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究。

  首先,px是绝对长度单位,是相对于显示器屏幕分辨率而言的,而em、rem是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。在国内,大部分网站是无法调整的,他们大部分是用的px做单位,国外的网站大多用em或rem作为单位字体,他们的网站的字体就容易调控。

  然后针对单独的px、em、rem我们说说他们的不同特点:

    px特点:px是典型的度量单位,值是固定的
    em特点:em的值并不是固定的; em会继承父级元素的字体大小。
    rem特点:rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
  那么问题来了,它们之间如何转化呢?下面是几种常见的转化方式:

    PX to EM
      Example: 12px / 16px = .75em
    PX to %
      Example: 12px / 16px * 100 = 75%
    PX to PT
      Example: 16px * (72pt / 96px) = 12pt
    EM to PX
      Example: .75em * 16px = 12px
    EM to %
      Example: .75em * 100 = 75%

  所以我们在写CSS的时候,需要注意:
    1. body选择器中声明Font-size=62.5%;
    2. 将你的原来的px数值除以10,然后换上em作为单位;
    3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
        也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
  我们还需要注意的是:rem设置的字体大小并不会随着浏览器的屏幕的改变而改变,它的改变与浏览器本身有关。

  最后为大家提供一个px,em,rem单位转换工具,地址:http://pxtoem.com/

css中px,em和rem的区别的更多相关文章

  1. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  2. css中单位em和rem

    一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...

  3. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  4. 简谈CSS 中的 em,rem,px,%

    在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...

  5. 详细讲解css单位px,em和rem的含义以及它们之间的区别

    一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...

  6. 彻底弄懂px,em和rem的区别

    国内的设计大师都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点: 1.IE无法调整那些使用px作为单位的字体大小: 2.国外大部分网站能够调整的原因 ...

  7. css中px em rem vw vh vmax vmin等单位的区别--转载

    px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...

  8. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  9. 比较css中单位px,em和rem的区别

    国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原 ...

随机推荐

  1. 前端打包构建工具gulp快速入门

    因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...

  2. 菜鸟快飞之JavaScript对象、原型、继承(二)

    上一节写了创建对象的三种方法,而其中通过函数创建对象的方式又有三种模式,分别是工厂模式.构造函数模式.原型模式.而这三种模式最常用的则是原型模式.还是上栗子: 工厂模式: function Fun1( ...

  3. Android中使用dimen定义尺寸(转)

    (转自:http://blog.csdn.net/yuzhiboyi/article/details/7696174) 最近,遇到了一种定义尺寸的方法,类似于C里面的宏定义一样,其实以前已经见过了这种 ...

  4. [转]学习Nop中Routes的使用

    本文转自:http://www.cnblogs.com/miku/archive/2012/09/27/2706276.html 1. 映射路由 大型MVC项目为了扩展性,可维护性不能像一般项目在Gl ...

  5. JavaScript 隐式转换

    javascript 中的怪癖,js运算符隐式类型转换 x + "" //等价于 String(x) + x //等价于 Number(x),也可以写成x-0 !!x //等价于 ...

  6. 【模式识别】Learning To Rank之RankBoost

    RankBoost的思想比較简单,是二元Learning to rank的常规思路:通过构造目标分类器,使得pair之间的对象存在相对大小关系.通俗点说,把对象组成一对对的pair,比方一组排序r1& ...

  7. google font和@font-face

    会使用google字体 网址: http://www.google.com/fonts/ 选择字体, quick use 引用css: <link href='http://fonts.goog ...

  8. In Depth : Android Shutdown Sequence

    What happened when I long press power button ?What is shutdown sequence ?How is it different from de ...

  9. android Tweened Animations

    Android提供了两种类型的动画: 一类是Tween动画:提供了旋转.移动.伸展和淡出等效果: 第二类是Frame-by-frame动画:这一类Animations可以创建一个Drawable序列, ...

  10. Web 项目报错No suitable driver found for jdbc:mysql://localhost:3306/book 的一个解决办法

    确认jar包加入到了build path中,然后注意版本是否与数据库相配,还要留意将jar包放入WEB-INF下的lib文件夹中