本文深入探讨了CSS3中浏览器前缀的使用场景和标准演变过程，以及rem单位在网页布局中的优势和应用技巧，帮助读者理解并掌握跨浏览器兼容性的解决方案。
CSS3前缀
在CSS3的很多新属性推出时，这些属性还处在不太稳定的阶段，随时可能被剔除。而此时的浏览器厂商为了实现这些属性，采用前缀方法。各大厂商前缀列表如下：
Chrome、Safari(谷歌、苹果) -webkit-
Opera -o-
Firefox -moz-
InternetExplorer -ms-
1.属性尚未提出，这个属性所有浏览器不可用；
2.属性被提出，但未列入标准，浏览器厂商通过私有前缀来支持该属性；
3.属性被列入标准，可以使用前缀或不使用前缀来实现属性特性；
4.属性不需要再使用前缀，所有浏览器都稳定支持
//因为目前处在标准阶段，没必要写前缀了
div{
border-radius:50px;
}
//实验阶段的写法（所有的兼容）
div{
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px; /*为了将来现在或将来标准化的新版本浏览器兼容*/
}
把前缀写在前面，标准写法写在最后面
长度单位rem
CSS3引入了一些新的尺寸单位，这里重点推荐一个：rem或者成为(根em)。目前主流的现代浏览器都很稳定的支持。它和em、百分比不同的是，它不是与父元素挂钩，而是相对于根元素<html>的文本大小来计算的，这样能更好的统一整体页面的风格。
//直接基于<html>的单位
<h1>我是标题<em>小标题</em></h1>
<p>我是段落，我是<code>代码</code></p>
html {
font-size: 62.5%;
}
//默认16px，62.5%为10px
h1 {
font-size: 3em;
}
p {
font-size: 1.4em;
}
//p为14px
如果想把code改为11px
/*
code {
font-size: 1.1em;
//这里是15px，因为em是和父元素挂钩，所以，是14px的1.1倍，就是15px左右
}
*/
/*code {
font-size: 0.786em; 这里是11px；但计算太复杂
}*/
code {
font-size: 1.1rem; /*和根挂钩的1.1倍，就是11px*/
}
扫一扫
4330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
