学习要点：

1.CSS3 前缀

2.长度单位 rem

主讲教师：李炎恢

本章主要探讨 HTML5 中 CSS 在发展中实行标准化的一些问题，重点探讨 CSS3 中新属性前缀问题和新的单位 rem。

一．CSS3 前缀

　　在 CSS3 的很多新属性推出时，这些属性还处在不太稳定的阶段，随时可能被剔除。而此时的浏览器厂商为了实现这些属性，采用前缀方法。各大厂商前缀列表如下：

浏览器

厂商前缀

Chrome、Safari

-webkit-

Opera

-o-

Firefox

-moz-

Internet Explorer

-ms-

　　我们之前学习过几个 CSS3 的新属性，比如：box-shadow、border-radius、opacity等。这几个属性我们在前面的使用中，并没有添加所谓的浏览器厂商前缀。那是因为，这些属性已经在主流浏览器或版本成为了标准。具体进化步骤如下：

1.属性尚未提出，这个属性所有浏览器不可用；

2.属性被提出，但未列入标准，浏览器厂商通过私有前缀来支持该属性；

3.属性被列入标准，可以使用前缀或不使用前缀来实现属性特性；

4.属性不需要再使用前缀，所有浏览器都稳定支持。

　　我们就拿 border-radius 举例，它是 CSS3 的标准属性。早期的时候处于实验阶段，尚未列入标准时，需要使用厂商前缀。具体浏览器支持度如下：

属性

浏览器

带前缀版本

不带前缀版本

标准/实验

border-radius

IE

不支持

9.0+

标准

Firefox

3.0 需带-moz-

4.0+

Safari

3.1 需带-webkit-

5.1+

Chrome

4.0

5.0+

Opera

不支持

10.5+

　　如果是手机等移动端一般采用的是 IOS 或安卓系统，那么基本上它的引擎是 webkit，直接参考-webkit-即可。

　　在 CSS3 手册上，Chrome 支持 border-radius 的版本为 13.0，而部分教材和文章上写到只要 5.0。当然，这里可能表达的含义可能不同。而截至到 2015 年 4 月份最新的 Chrome 版本已经到 41.0 了，所以，不管是 5.0 还是 13.0 都是老古董了，没必要深究。Opera 支持 border-radius 版本为 11.5，而目前的版本是 28.0，也无伤大雅了。

　　而被列入标准的 box-shadow 和 opacity 基本与 border-radius 前缀版本一致。

//因为目前处在标准阶段，没必要写前缀了

  1. div {
  2.     border-radius: 50px;
  3. }

//实验阶段的写法

  1. div {
  2.     -webkit-border-radius: 50px;
  3.     -moz-border-radius: 50px;
  4.     border-radius: 50px;
  5. }

　　实验阶段的写法有三句，分别解释一下：-webkit-表示 Chrome 浏览器的私有属性前缀、-moz-表示 Firefox 私有属性前缀，如果是处于实验阶段的旧版本浏览器，那么不支持 border-radius，从而通过厂商前缀的方式来支持。如果是新版浏览器，已经是处于标准阶段，那么又有两种说法：1.如果新版浏览器废弃了前缀，那么前缀写法就不支持了，仅支持标准写法；2.如果新版浏览器没有废弃前缀，那么两种写法都可以，但要注意顺序，且属性值要保持一致。

　　如果同时出现四个前缀+一个标准写法，四个前缀是当实验阶段时让四种引擎的浏览器厂商支持自己的私有属性，一个标准写法表示当这个属性列入标准后，使用新版浏览器运行时直接执行这个标准属性。

//前缀写法写在标准后面，且值不一样，就会出现问题

  1. div {
  2.     border-radius: 50px;
  3.     -webkit-border-radius: 100px;
  4. }

　　特别注意：1.IE 的前缀-ms-，和 Opera 的前缀-o-，在 border-radius 中不存在；2.现在的Opera 浏览器也支持-webkit-前缀，-webkit-border-radius 就能支持；3.Safari for Windows 已被苹果公司在 2012 年放弃，遗留版本为 5.1.7。

　　最后说明：W3C 官方的立场表示实验阶段的属性仅为了测试，未来有可能修改或删除。而大量的开发者也认为在实际项目中不应该使用前缀，而使用一种优雅降级保证一定的用户体验，而通过渐进增减的方式让新版高级浏览器保证最高的效果。

二．长度单位 rem

　　CSS3 引入了一些新的尺寸单位，这里重点推荐一个：rem 或者成为(根 em)。目前主流的现代浏览器都很稳定的支持。它和 em、百分比不同的是，它不是与父元素挂钩，而是相对于根元素<html>的文本大小来计算的，这样能更好的统一整体页面的风格。

//首先，来一段 HTML

  1. <h1>标题<em>小标题</em></h1>
  2. <p>
  3.     我是一个段落，我是一段<code>代码</code>
  4. </p>

//其次来一段 CSS

  1. html {
  2.     font-size: 62.5%;
  3. }
  4.  
  5. h1 {
  6.     font-size: 3em;
  7. }
  8.  
  9. p {
  10.     font-size: 1.4em;
  11. }

　　这里做几个解释，我们在之前的 Web 设计中大量使用了 px 单位进行布局。因为，早期的固定布局使用 px 较为方便，逐渐养成了这种习惯。而使用 em 单位其实更加灵活，尤其是在修改样式时，只需要修改一下挂钩元素的那个大小即可，无须每个元素一个个修改。

　　但就算是 em，还是有一定问题。网页默认的字号大小为 16px，然后通过<html>设置62.5%，将网页基准设置为 10px。而<h1>设置为 3em，就是自身大小的 3 倍；<p>设置为1.4em，就是 10px 的 1.4 倍，即 14px。

　　现在问题来了，<code>里面的文本想设置 11px，怎么办呢？设置 1.1em 吗？不对，因为它挂钩的父元素不是<html>而是<p>变成了 14px 的 1.1 倍了，而想设置 11px，则需要设置 0.786 倍才行。但是，这样的计算量太大了。所以，W3C 推出了直接基于根元素单位：rem。

//直接基于<html>的单位

  1. code {
  2.     font-size: 1.1 rem;
  3. } 

浏览器

rem 单位

Opera

11.6+

Firefox

3.6+

Safari

5.0+

Chrome

6.0+

IE

9.0+

第 20 章 CSS3 前缀和 rem的更多相关文章

  1. 第七十七节，CSS3前缀和rem长度单位

    CSS3前缀和rem长度单位 学习要点: 1.CSS3前缀 2.长度单位rem 本章主要探讨HTML5中CSS在发展中实行标准化的一些问题,重点探讨CSS3中新属性前缀问题和新的单位rem. 一 CS ...

  2. webpack快速入门——CSS进阶：自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  3. 第20章 priority_queue优先队列容器

    /* 第20章 priority_queue优先队列容器 20.1 priority_queue技术原理 20.2 priority_queue应用基础 20.3 本章小结 */ // 第20章 pr ...

  4. (转）css3前缀

    CSS3的前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分.看看都有哪些前缀: -webkit(chrome) -moz(firefox) -ms(ie) ...

  5. 第20章 状态模式（State Pattern）

    原文 第20章 状态模式(State Pattern) 状态模式  概述:   当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式主要解决的是当控制一个对象状态的条件表 ...

  6. 介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer（附其他前端开发插件）

    正文 自动给CSS文件添加不同浏览器的CSS3前缀:Autoprefixer 安装 只需兼容主流浏览器 正常情况使用:(在书写完的CSS样式文件中,按F1,选择Autoprefixer CSS) 这时 ...

  7. 【RL-TCPnet网络教程】第20章 RL-TCPnet之BSD Socket客户端

    第20章      RL-TCPnet之BSD Socket客户端 本章节为大家讲解RL-TCPnet的BSD Socket,学习本章节前,务必要优先学习第18章的Socket基础知识.有了这些基础知 ...

  8. 《mysql必知必会》学习_第20章_20180809_欢

    第20章:更新和删除数据 P140 update customers set_emails='elmer@fudd.com' where cust_id=10005; 更新多个列,用逗号隔开.注意被指 ...

  9. 【Android】20.0 第20章 音频、视频、拍照、语音合成

    分类:C#.Android.VS2015: 创建日期:2016-03-11 一.简介 Android提供了常见的多媒体文件编码.解码机制,你可以直接调用Android提供的API,实现相册.播放器.录 ...

随机推荐

  1. JS 内置对象

    内置对象的定义:有ECMAScript实现提供的.不依赖与宿主环境的对象,在ECMAScript运行之前就已经创建好的对象就叫做内置对象. 就是说,是不需要我们开发人员先是的实例化对象就能够调用和运行 ...

  2. 每天一个linux命令（40）：wc命令

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1．命令格式: wc [选项]文件... 2．命令功能: 统计指定文件中的字节数. ...

  3. css图片叠加和底部定位

    css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...

  4. 快速入门系列--WebAPI--01基础

    ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因 ...

  5. KendoUI系列：DatePicker

    1.基本使用 <link href="@Url.Content("~/C ontent/kendo/2014.1.318/kendo.common.min.css" ...

  6. PHP 对象 “==” 与 “===”

    php中对象在内存中的存储方式与java等其他面向对象语言类似,$a = new Person();在内存中表现为$a是堆区中new Person()中的引用 这样当: $a = new Person ...

  7. javascript运算符——条件、逗号、赋值、()和void运算符

    × 目录 [1]条件 [2]逗号 [3]赋值[4]()[5]void 前面的话 javascript中运算符总共有46个,除了前面已经介绍过的算术运算符.关系运算符.位运算符.逻辑运算符之外,还有很多 ...

  8. 算法设计和数据结构学习_5(BST&AVL&红黑树简单介绍)

    前言: 节主要是给出BST,AVL和红黑树的C++代码,方便自己以后的查阅,其代码依旧是data structures and algorithm analysis in c++ (second ed ...

  9. 轻松自动化---selenium-webdriver(python) (十一)

    本节重点: 控制滚动条到底部 有时候我们需要控制页面滚动条上的滚动条,但滚动条并非页面上的元素,这个时候就需要借助js是来进行操作.一般用到操作滚动条的会两个场景: 注册时的法律条文需要阅读,判断用户 ...

  10. Web 开发人员和设计师必读文章推荐【系列三十】

    <Web 前端开发精华文章推荐>2014年第9期(总第30期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...