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. java演示适配器(adapter)模式

    为什么要使用模式: 模式是一种做事的一种方法,也即实现某个目标的途径,或者技术. adapter模式的宗旨就是,保留现有类所提供的服务,向客户提供接口,以满足客户的需求. 类适配器:客户端定义了接口并 ...

  2. C#中的DateTime:本周第一天,本月第一天,今年第一天,本周第一天的时间

    有时辰需要按照当前时刻,断定其它的都没有什么难度,只是本季度稍稍麻烦些.因为一年有四个季度,可以按照当前月份,获得本季度第一个月的月份,然后这个月的第一天,就是本季度的第一天了 DateTime dt ...

  3. Agile.Net 组件式开发平台 - 内核管理组件

    敏捷开发体系   软件构件技术:所谓软件构件化,就是要让软件开发像机械制造工业一样,可以用各种标准和非标准的零件来进行组装.软件的构件化和集成技术的目标是:软件系统可以由不同厂商提供的,用不同语言开发 ...

  4. Mysql增加主键或者更改表的列为主键的sql语句

                                                                                                        ...

  5. js中元素操作的有关内容与对比

    以下 A:代表原生js B:代表jQuery 1 创建元素/节点 A: 元素节点- createElement( ) 文本节点 - createTextNode() 例如: var a = docum ...

  6. css 等高补偿法

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  7. 【leetcode】354. Russian Doll Envelopes

    题目描述: You have a number of envelopes with widths and heights given as a pair of integers (w, h). One ...

  8. Poj 2840 Big Clock

    1.Link: http://poj.org/problem?id=2840 2.Content: Big Clock Time Limit: 1000MS   Memory Limit: 13107 ...

  9. php+mysql非缓冲查询(如何循环大数组)

    另外一种PHP查询模式是非缓冲查询,数据库服务器会一条一条的返回数据,而不是一次全部返回,这样的结果就是PHP程序消耗较少的内存,但却增加了数据库服务器的压力,因为数据库会一直等待PHP来取数据,一直 ...

  10. YII框架源码分析(百度PHP大牛创作-原版-无广告无水印)

           YII 框架源码分析    百度联盟事业部——黄银锋 目 录 1. 引言 3 1.1.Yii 简介 3 1.2.本文内容与结构 3 2.组件化与模块化 4 2.1.框架加载和运行流程 4 ...