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. Ajax返回xml类型数据

    ajax可以返回文本类型数据和xml类型数据,xml是计算机通用语言 可以使用js解析返回xml类型数据的dom对象 前端页面 <!doctype html> <html lang= ...

  2. Win7显示隐藏文件,隐藏文件夹怎么显示?如何查看?

    隐藏文件技术是木马病毒传播最惯用的手法之一,它们利用大部分网友对基础操作的不熟悉特点,逃过用户的发现和检查,显示隐藏文件的标准设置方法大家都会使用,一旦隐藏问题与病毒木马结合起来,比如典型的autor ...

  3. ASSERT报错:error C2664: “AfxAssertFailedLine”: 不能将参数 1 从“TCHAR []”转换为“LPCSTR”

    转载请注明来源:崨雁嫀筝 http://www.cnblogs.com/xuesongshu 这个错误是我在把tinyxml修改为宽字符(Unicode)版本时候遇到的问题,我首先按关键字把所有有ch ...

  4. ios Swift ! and ?

    swift ?和!之间区别: Swift 引入的最不一样的可能就是 Optional Value 了.在声明时,我们可以通过在类型后面加一个? 来将变量声明为 Optional 的.如果不是 Opti ...

  5. 合理使用mysql中的load data infile导入数据

    基本语法: load data  [low_priority] [local] infile 'file_name txt' [replace | ignore]into table tbl_name ...

  6. 第四十二篇、自定义Log打印

    1.在Xcode 8出来之后,需要我们去关闭多余的日志信息打印 2.在开发的过程中,打印调试日志是一项比不可少的工程,但是在iOS 10中NSLog打印日志被屏蔽了,就不得不使用自定义Log 3.去掉 ...

  7. UVaLive6834 Shopping

    题意:一条直线上有n个点,标号从1到n,起点为0,终点为N+1,给定m个限制关系(ci,di),访问ci点前必须先访问di点,每两个点之间是单位距离,求在限制条件下,从起点到终点访问完所有的点的最短距 ...

  8. CAF(C++ actor framework)使用随笔(unbecome与keep_behavior用法)

    看usermanual(使用随笔一里面有)看到差不多一半的时候,这个keep_behavior与unbeacome的结合引起了我的注意.(这是为什么呢?) 因为它的示例代码写的太简单了!我真的没看太懂 ...

  9. 使用git的正确姿势

    1.Windows上安装git:从https://git-for-windows.github.io下载msysgit. 2.linux(Debian或Ubuntu)安装git:sudo apt-ge ...

  10. SublimeText更换皮肤

    SublimeText是一款非常好用的文本编辑工具,官方网址http://www.sublimetext.com/. 这里介绍一下手动安装SublimeText皮肤的方法. (1)首先找一款你喜欢的皮 ...