您的位置：首页 > Web前端 > CSS

CSS 前缀和rem（20160825-0025）

2016-09-02 13:48 141 查看
一、CSS3 前缀

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

浏览器厂商前缀
Chrome、Safari-webkit-
Opera-o-
Firefox-moz-
Internet Explorer-ms-
之前学过几个 CSS3 的新属性，比如：box-shadow、border-radius、opacity等。这几个属性在使用的时候，并没有添加所谓的浏览器厂商前缀。那是因为属性已经在主流浏览器或版本成为了标准。具体进化步骤如下：

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

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

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

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

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

浏览器带前缀版本不带前缀版本实验 / 标准
IE不支持9.0+标准
Firefox3.0需带 -moz-4.0+标准
Safari3.1 需带 -webkit-5.1+标准
Chrome4.05.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 基本与 box-radius 前缀版本一致。

/* 给 div 设置一些通用属性，方便观察 */
div{
border:solid 2px silver;
width: 300px;
height: 300px;
}
div{
/* 因为目前处于标准阶段，没必要写前缀了 */
/*border-radius: 30px;*/
}
/* 实验阶段的写法 */
div{
/* -webkit- 表示 Chrome 浏览器的私有属性前缀、-moz- 表示 Firefox 私有属性前缀，如果是处于实验阶段旧版本浏览器，那么不支持 border-radius ，从而能通过厂商前缀的方式来支持。如果是新版浏览器，已经是处于标准阶段，那么又有两种说法：a.如果新版浏览器废弃了前缀，那么前缀写法就不支持了，仅支持标准写法；b.如果新版浏览器没有废弃前缀，那么两种写法都可以，但要注意顺序，且保持属性值要一致。 */
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius: 30px;
}
如果同时出现四个前缀 + 一个标准写法，四个前缀是当实验阶段时让四种引擎浏览器厂商支持自己的私有属性，一个标准写法表示当这个属性列入标准后，使用新版浏览器运行时直接执行这个标准属性。

div{
/* 前缀写法写在标准后面，且值不一样，就会出现问题。 */
/*border-radius: 30px;
-webkit-border-radius:30px;*/
}
特别注意：a. IE浏览器的前缀 -ms-，和 Opera 的前缀 -o-，在 border-radius 中不存在；b.现在的 Opera 浏览器也支持 -webkit- 前缀，-webkit-border-radius 就能支持；c.Safari for Window 已被苹果在 2012 年放弃，遗留版本文5.1.7。

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

二、长度单位 rem

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

<h1> 标题<em>小标题</em></h1>
<p> 我是一个段落，我是一段<code>代码</code></p>
<pre name="code" class="html">html{
font-size: 62.5%;
}
h1{
font-size: 5em;
}
p{
font-size: 1.4em;
}
code{
/*font-size: 1.1em;*/
/* 这里是15px左右，因为 em 是和父元素挂钩所以 14px的1.1倍，就是 15px左右。但是
如果想要设置字体大小 11px，则需要设置 0.786 倍才行，但这样计算量太大。所以，W3C 推出
了直接基于根元素单位：rem */
font-size: 1.1rem;
}



之前的 Web 设计中大量使用 px 单位进行布局。因为早期的固定布局使用 px 较为方便，逐渐养成了这种习惯。而使用 em 单位其实更加灵活，尤其是在修改样式时，只需要修改一下挂钩元素的那个大小即可，无需每个元素一个个修改。但就算是 em，还是有一定的问题。网页默认的字号为 16px，然后通过 <html> 设置 62.5%，将网页基准设置为 10px。而 <h1> 设置为 5em，就是 10px 的5倍，即 50px； <p> 设置为 1.4em ，就是 10px 的1.4倍，即 14px。

示例代码地址
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                CSS 前缀
                                                rem
                                                示例
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航