美文网首页
px、 em 、rem的特点

px、 em 、rem的特点

作者: 9979eb0cd854 | 来源:发表于2018-09-13 13:40 被阅读62次
px、 em 、rem
image.png

px

px是像素,表示绝对单位,不会因其他元素的尺寸变化而变化。

em

em是根据父元素来对应大小,是一种相对值,并不是绝对值,em值 = 1/父元素的font-size*需要转换的像素值。进行任何元素设置,都有可能需要知道他父元素的大小。


em

rem

rem是根据根元素html的font-size来对应大小,1rem = 100px,可以在根元素html中写固定像素也可以写百分比,然后在具体的标签上设置rem。

px特点:

像素px是相对于显示器屏幕分辨率而言的
  1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。


    px特点

em特点:

  1. em的值并不是固定的;

  2. em会继承父级元素的字体大小。

所以我们在写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。
em

rem特点 :

rem特点

相关文章

  • px、 em 、rem的特点

    px px是像素,表示绝对单位,不会因其他元素的尺寸变化而变化。 em em是根据父元素来对应大小,是一种相对值,...

  • px、em、rem的区别

    PX em rem

  • css中px、rem、em的区别

    一、px特点: 1、IE无法调整px作为单位的字体大小; 2、Firefox能够调整px、em和rem。 px是像...

  • 了解 px em rem三种单位的区别

    1、px特点: 1、IE无法调整px作为单位的字体大小; 2、Firefox能够调整px、em和rem。 px是像...

  • rem,px,em单位区别

    rem,px,em单位区别

  • em和rem

    css中单位长度用的最多的就是px,em,rem。其中,px是固定像素。em和rem是相对长度单位,em相对于父元...

  • em、rem、px区别

    css中如何区分em、rem、px? 随着css学习的不断深入页面也随之丰富,那么em、rem、px是我们在页面布...

  • rem与em区别

    响应式Web设计—px-em-rem三者区别及rem的使用在css中单位长度用的最多的是px、em、rem,这三个...

  • 浅谈使用rem实现页面自适应布局

    在谈到rem时大家可能都会想到em px等用于设置页面元素的单位,但就rem来说它有em和px不可达的优点。rem...

  • 2019-08-29

    px、rem、em的区别 随着css学习的不断深入页面也随之丰富,那么em、rem、px是我们在页面布局中经常会用...

网友评论

      本文标题:px、 em 、rem的特点

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