关闭

谈谈css中px , em,及rem

标签: cssrem
327人阅读 评论(0) 收藏 举报
分类:

    今天查了查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 可能会导致布局错位,如下链接所述:




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:556次
    • 积分:25
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档