谈谈css中px , em,及rem

原创 2015年11月17日 15:43:26

    今天查了查css中的px,em,rem,在这做个总结。

px

优点:精确,兼容性良好。

缺点: IE无法调整使用px作为单位的字体大小。

使用IE浏览器(或内核)的网民无法调整使用px的网页字体的大小,影响用户体验。

em

特点:

  1. 任意浏览器的默认字体高都是16px,字体未经调整的浏览器1em=16px;
  2. em的值并不是固定的,继承父级元素的字体大小。
优点:

相对单位,在IE浏览器中可以调整网页字体大小。

缺点:

因其是基于父元素字体大小的相对的值,换算麻烦,字体大小须逐层复合,若字体大小重复声明,易造成字体大小的混乱,

例如:想得到子元素字体大小为24px,父元素声明:font-size:1.5em;子元素也设置:font-size:1.5em; 

那么子元素字体的实际大小则是16*1.5*1.5=36px。

rem

特点:
  1. css3新增相对单位;
  2. 其大小基于html根元素。
优点:
  1. 相对单位,可以在IE浏览器中调整网页字体大小;
  2. 基于html根元素,易于计算和维护。
缺点:不支持IE8及以下版本浏览器。

使用范例:
html{font-size: 625%; /* 100 ÷ 16 × 100% = 62.5%  */}
body{font-size: 0.14rem; /* 0.14 × 100px = 14px */}
h1{font-size: 0.24rem; /* 0.24 × 100px = 24px */}
Ps. 一些网站设置html的font-size:62.5%,这样的缺点是有的浏览器的字体设定最小的为12px,设置成62.5%会自动计算成12px(如中文版chrome,当然也可以解决,也许以后会总结怎样解决大笑)。
为了使其兼容IE6-8,可以px及rem一同使用,看具体情况怎样适合。例:
p{
font-size:14px;
font-size:0.14rem;
}


不过据说,通常在标题,正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景,rem 可能会导致布局错位,如下链接所述:

http://www.woshipm.com/ucd/24110.html



相关文章推荐

谈谈css中px,em,rem的区别

px 像素(pixel)相对长度单位,相对于显示器屏幕分辨率而言。特点: IE无法调整以px为单位的字体大小 一部分用户仍在使用IE浏览器或者内核 一般使用px来设置文本 ,因为比较精确和稳定, 但如...

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

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

css中单位px、em以及rem的区别

px特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; 3. Firefox能够调整px和em,rem,但是96...

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

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

css中px和em,rem的区别

css中px和em,rem的区别 css中em px 区别 em px 区别 16px 1em=16px 2px=0.75em, 1px=0.0625em,10px=0.625em...

详解css中px、em和rem的区别

一.概念1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般...
  • web_hwg
  • web_hwg
  • 2017年04月15日 17:43
  • 98

CSS 中单位px和em,rem的区别

引用Link: http://www.cnblogs.com/leejersey/p/3662612.html  国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,...

CSS长度单位:vh、vw、vmin、vmax、em、rem、ex、ch、px

CSS的长度单位。 一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。 长度单位包括包括:相对单位和绝对单位。 相对长度单位包括有: em...

css3大小单位px、pt、em和rem的区别

css3大小单位px、pt、em和rem的区别   国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :...

CSS中rem em px的区别

PX: px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点: 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:谈谈css中px , em,及rem
举报原因:
原因补充:

(最多只允许输入30个字)