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

时间 2019-11-12

标签第七十七 css3 css 前缀 rem 长度单位栏目 CSS 繁體版

原文原文链接

CSS3前缀和rem长度单位html

学习要点：
1.CSS3前缀
2.长度单位remweb

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

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

浏览器厂商前缀学习

Chrome、Safari -webkit-测试

Opera -o-spa

Firefox -moz-设计

Internet Explorer -ms-调试

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

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单位乘以根基准=像素

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

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