em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

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。

但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

rem

CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm。

CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。

em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),意思就是说你可以在html节 点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字体的百分比进行设置,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设 置多大的字体,这完全可以根据您自己的需,大家也可以参考下图:

我们来看一个简单的代码实例:

  1. html {
  2. font-size:62.5%;/*10 ÷ 16 × 100% = 62.5%*/
  3. }
  4. body {
  5. font-size:1.4rem;/*1.4 × 10px = 14px */
  6. }
  7. h1 {
  8. font-size:2.4rem;/*2.4 × 10px = 24px*/
  9. }

我在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。

浏览器的兼容性

rem是CSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还 是蛮多的,比如:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8不支持。
不过使用单位设置字体,可不能完全不考虑IE了,如果你想使用这个REM,但也想兼容IE下的效果,可你可考虑“px”和“rem”一起使用,用”px”来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。

  • 单位英寸像素数(Pixel Per Inch,PPI):现实世界的一英寸内像素数,决定了屏幕的显示质量
  • 设备像素比率(Device Pixel Ratio,DPR):物理像素与逻辑像素(px)的对应关系
  • 分辨率(Resolution):屏幕区域的宽高所占像素数

CSS系列:长度单位&字体大小的关系em rem px的更多相关文章

  1. css长度单位学习(em,rem,px,vw,vh)

    绝对长度单位 绝对长度单位代表一个物理测量 [像素px(pixels)] 像素,为影像显示的基本单位,译自英文"pixel",pix是英语单词picture的常用简写,加上英语单词 ...

  2. css颜色,字体大小的设置

    设置字体的颜色通过下面的代码: color : #f00; color是颜色的意思,color用来设置一个标签的前景色,表现出来也就是元素文本的颜色. 它的值,一般都是使用#加16进制的颜色值来表示. ...

  3. CSS知识点之字体大小属性font-size

    管理文本的大小在 web 设计领域很重要.但是,不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落.请始终使用正确的 HTML 标题,比如使用 <h1> - <h6&g ...

  4. em,rem,px的实际应用

    看了好多的文章,就只是在看他们的换算,没有实际做出例子所以一直很疑惑,不知道到底是怎么写的.今天写了一个demo.务必彻底弄清楚. 先说三者的区别: 首先是我们常见的px. px: em:相对长度单位 ...

  5. 在移动端如何选择字体大小和布局的单位,px或dp?

    android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px.这些单位如何换算,是设计师.开发者需要了解的关键. 简单理解的话,px(像素)是我们UI设计师在PS ...

  6. 小胖说事14--------IOS字体大小,字号的问题 PX转化为UIFont

    PX和Font之间相互转换公示表: 计算公式为:font=(像素PX)/(96/72).

  7. em,rem,px的区别,以及实现原理?

    px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.em是相对长度单位.相对于当前对象内文本的字体尺寸举个例子:比如说当前容器`font-size:16px;`则`1em`就 ...

  8. 响应式布局中为什么要使用em设置字体大小而不用px

    px像素(Pixel).相对长度单位.像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的.(引自CSS2.0手册) 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此 ...

  9. em与px区别-CSS教程

    在现在的网页设计中,网页设计者都非常注重用户体验.而CSS中,font-size使用em还是px,如果选择不好将会影响到我们的用户体验.大部分的网页设计者认为px比em容易使用,或者有些根本就不知道e ...

随机推荐

  1. Mybatis各种模糊查询

    转载自:http://blog.sina.com.cn/s/blog_667bef380101f2da.html 工作中用到,写三种用法吧,第四种为大小写匹配查询 1. sql中字符串拼接 SELEC ...

  2. IE的浏览器模式和文档模式

    只有IE浏览器中才会有“浏览器模式”和“文档模式”,兼容性视图涉及两个重要的功能 便是“浏览器模式[browser mode]”和“文档模式[document mode]”,在IE8/IE9中按F12 ...

  3. linux环境下配置虚拟主机域名

    linux环境下面配置虚拟主机域名 第一步:在root目录下面(即根目录)ls(查看文件)cd进入etc目录find hosts文件vi hosts 打开hosts文件并进行编辑在打开的文件最下面添加 ...

  4. php 面向对象之封装

    <body> <?php //类的概念 //对象的概念 //定义类 //class Ren //{ //成员变量 //成员方法 //} //造对象 //$r = new Ren(); ...

  5. SQL 总汇

    /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...

  6. vsftp 一键安装包

    http://pan.baidu.com/s/1mibAJC8

  7. MyISAM InnoDB 区别

    MyISAM 和 InnoDB 讲解 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级处 ...

  8. wp7 xml

    public class DynamicXMLNode : DynamicObject { XElement node; public DynamicXMLNode(XElement node) { ...

  9. 三星笔记本预装WIN8_降级WIN7方法

    相信很多人在近两年购买笔记本都会遇到这样的问题.预装系统是windows 8用着不习惯想换系统的请往下看.换windows 7  windows XP 设备方法相同 WIN8降级WIN7是要重新分区的 ...

  10. 【现代程序设计】homework-10

    作业地址:http://www.cnblogs.com/xinz/p/3441537.html 进行中...