CSS3前缀和rem长度单位

学习要点：
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前缀版本一致。

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

div {

    border-radius: 50px;

}

实验阶段的写法 

div {

     -webkit-border-radius: 50px;

     -moz-border-radius: 50px;

     border-radius: 50px;

}

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

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

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

div {

     border-radius: 50px;

     -webkit-border-radius:100px;

}

特别注意：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>的文本大小来计算的，这样能更好的统一整体页面的风格。

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

html{

    font-size: 5px;

}

h1{

    font-size: 3rem;

}

h2{

    font-size: 2.5rem;

}

h3{

    font-size: 2rem;

}

h4{

    font-size: 1.5rem;

}

<h1>这是标题1</h1>

<h2>这是标题2</h2>

<h3>这是标题3</h3>

<h4>这是标题4</h4>

简单的说就是，在html根设置一个文字大小的像素px，然后html里面的元素用rem单位来定义，如html根元素文字大小为5px，里面的h1标签为3rem，也就是h1的文字大小是根5px的3倍，5乘以3就是15px，以此计算，这样如果以后想改变页面整体的大小，只需要改变根文字大小即可，因为其他标签会根据根大小来自适应

注意：html根文字大默认是16px，所以调试阶段根一般为16px

rem浏览器支持情况

                  浏览器                             rem单位

                  Opera                             11.6+

                  Firefox                            3.6+

                  Safari                              5.0+

                  Chrome                           6.0+

                    IE                                 9.0+

单位计算

要设置的像素除以根基准=rem单位

rem单位乘以根基准=像素

换算子元素宽度站父元素宽度的百分之几，子元素宽度除以父元素宽度=子元素宽度站父元素宽度的百分之几

将子元素宽度站父元素宽度的百分之几换算成像素，子元素宽度的百分之几乘以父元素的宽度=子元素的像素

第七十七节，CSS3前缀和rem长度单位的更多相关文章

  1. 第三百七十七节，Django+Xadmin打造上线标准的在线教育平台—apps目录建立，以及数据表生成

    第三百七十七节,Django+Xadmin打造上线标准的在线教育平台—apps目录建立,以及数据表生成 apps目录建立 我们创建一个apps目录,将所有的app放到apps目录里去,这样方便管理,也 ...

  2. 第 20 章 CSS3 前缀和 rem

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

  3. 第二百七十七节，MySQL数据库-数据表、以及列的增删改查

    MySQL数据库-数据表.以及列的增删改查 1.创建一个表 CREATE(创建) TABLE(表) ENGINE(引擎) ENGINE=INNODB(引擎)还有很多类引擎,这里只是简单的提一下INNO ...

  4. 第一百七十七节，jQuery，知问前端--概述及 jQuery UI

    jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一．项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...

  5. 第三百八十七节，Django+Xadmin打造上线标准的在线教育平台—网站上传资源的配置与显示

    第三百八十七节,Django+Xadmin打造上线标准的在线教育平台—网站上传资源的配置与显示 首先了解一下static静态文件与上传资源的区别,static静态文件里面一般防止的我们网站样式的文件, ...

  6. 第三百五十七节，Python分布式爬虫打造搜索引擎Scrapy精讲—利用开源的scrapy-redis编写分布式爬虫代码

    第三百五十七节,Python分布式爬虫打造搜索引擎Scrapy精讲—利用开源的scrapy-redis编写分布式爬虫代码 scrapy-redis是一个可以scrapy结合redis搭建分布式爬虫的开 ...

  7. 第三百一十七节，Django框架，缓存

    第三百一十七节,Django框架,缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返 ...

  8. centos samba/squid 配置 samba配置 smbclient mount fstab自动挂载samba curl -xlocalhost:3128 www.qq.com squid配置 3128 DNSPOD 第二十七节课

    centos  samba/squid 配置  samba配置 smbclient  mount fstab自动挂载samba curl -xlocalhost:3128 www.qq.com squ ...

  9. (转）css3前缀

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

随机推荐

  1. windows下npm scripts不能执行的问题

    最近在学webpack为了方便把运行脚本写入package.json文件中,如下: "scripts": { "start": "webpack-de ...

  2. vue组件，撸第一个

    实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...

  3. docker网络解析

    Docker概念和默认网络 什么是Docker网络呢?总的来说,网络中的容器们可以相互通信,网络外的又访问不了这些容器.具体来说,在一个网络中,它是一个容器的集合,在这个概念里面的一个容器,它会通过容 ...

  4. Ubuntu中Qt+opencv图像显示

    先抛出一个疑问,知道的希望留言解答下 (创建Application->Qt Console Application,代码与下面2.3一样,运行有时会显示图片,但大多数不显示,为什么?) 1.打开 ...

  5. C# 语言规范_版本5.0 (第20章 附录B_语法)

    A. 语法 此附录是主文档中描述的词法和语法以及不安全代码的语法扩展的摘要.这里,各语法产生式是按它们在主文档中出现的顺序列出的. A.1 词法文法 input: input-sectionopt i ...

  6. 算法系列——huffman编码

    哈夫曼编码,旨在对信息实现一种高效的编码,这种编码中任何一个都不是其他编码的前缀码.因此,在实际接收时,一旦匹配,就可以立即解码. 具体算法过程可以参加网上的很多教程. 给出一个自己的实现,一方面加强 ...

  7. USACO 3.2 Contact

    ContactIOI'98 The cows have developed a new interest in scanning the universe outside their farm wit ...

  8. Mac OS启动服务优化高级篇（launchd tuning）

    Mac下的启动服务主要有三个地方可配置:1,系统偏好设置->帐户->登陆项2,/System/Library/StartupItems 和 /Library/StartupItems/3, ...

  9. ElasticSearch(7)-排序

    引用自ElaticSearch权威指南 一.排序 相关性排序 默认情况下,结果集会按照相关性进行排序 -- 相关性越高,排名越靠前. 这一章我们会讲述相关性是什么以及它是如何计算的. 在此之前,我们先 ...

  10. NodeJs md5 sha1加密

    var crypto = require('crypto');module.exports = {  md5: (str)=> {    return crypto.createHash('md ...