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

  CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上

  是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的

  了解rem。

  em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点

  (或者是html节点),意思就是说你可以在html节点定义一个单独的字体大小,然后所

  有其他元素使用rem相对于这个字体的百分比进行设置,这样就意味着,我们只需要在

  根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需,大

  家也可以参考下图:

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

html {
font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size: 1.4rem;/*1.4 × 10px = 14px */
}
h1 {
font-size: 2.4rem;/*2.4 × 10px = 24px*/
}

  我在根元素中定义了一个基本字体大小为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”来实现代浏览器的效果。

CSS3新的字体尺寸单位rem的更多相关文章

  1. 谈谈css3的字体大小单位[rem]

    最近接收了一份面试题,内容是移动端传播的H5(在中国通常这么叫)广告页. 秉承移动端web尽量少用px的概念,我使用rem进行了一次重构.对于rem,基本是给 html/body 元素定义一个字体大小 ...

  2. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  3. css 相对单位rem详解

      CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. ...

  4. css3文字与字体的相关样式

    给文字添加阴影——text-shadow属性 text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length c ...

  5. 关于CSS中的字体尺寸设置 em rem等

    常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...

  6. 关于CSS中的字体尺寸设置 em rem

    常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...

  7. 尺寸单位em,rem,vh,vw

    这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...

  8. CSS3新单位vw、vh、vmin、vmax使用详解

    像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 新单位也成为视窗单位,视窗(View ...

  9. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

随机推荐

  1. secureFX中出现中文乱码修改方法

    1. 找到SecureFX配置文件夹(选项--全局选项,常规下的配置文件夹),比如:D:\Program files\SecureCRT\DATA:2. 在配置文件夹下的Sessions子目录中,找到 ...

  2. 【转载】Apache Kafka监控之Kafka Web Console

    http://www.iteblog.com/archives/1084 Kafka Web Console是一款开源的系统,源码的地址在https://github.com/claudemamo/k ...

  3. iBeacon

    iBeacon[1] 是苹果公司2013年9月发布的移动设备用OS(iOS7)上配备的新功能.其工作方式是,配备有 低功耗蓝牙(BLE)通信功能的设备使用BLE技术向周围发送自己特有的ID,接收到该I ...

  4. Agile.Net 组件式开发平台 - 服务器端部署

    应用服务器: 操作系统要求推荐Windows Server 2008,服务器硬件如果支持64位建议安装64位操作系统产品以最大化发挥服务器性能. 安装操作系统Windows Server 2008,其 ...

  5. 基于Tengine的反向代理详细配置

    系统环境: SUSE Linux Enterprise Server 10 SP1 (x86_64) 注:所有软件包都放置在/data/software目录下 nginx_tcp_proxy_modu ...

  6. HTML+CSS学习笔记(4) - 认识标签(3)

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  7. C++ typedef用法小结

    一.typedef的四个用法 用法一: 为复杂的声明定义一个新的简单的别名.方法是:在原来的声明里逐步用别名替换一部分复杂声明,如此循环,把带变量名的部分留到最后替换,得到的就是原声明的最简化版.举例 ...

  8. 【转载】学习C++和编程的几个要点

    1.把C++当成一门新的语言学习(和C没啥关系!真的.):2.看<ThinkingIn C++>,不要看<C++变成死相>:3.看<The C++ Programming ...

  9. oracle的decimal和number的对比

    Oracle只是在语法上支持decimal类型,但是在底层实际上它就是number类型,支持decimal类型是为了能把数据从Oracle数据库移到其他数据库中(如DB2等). 因为decimal在O ...

  10. TCL_事务控制语言

    TCL     transaction  事务   --  DML            定义为把一连串的操作作为单个逻辑工作单元处理                -----     例如:银行转账 ...