index.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS3前缀和rem</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>我是标题<em>小标题</em></h1> <p>我是段落，我是<code>代码</code></p> <!-- <div>我是HTML5</div> --> </body> </html>
style.css
@charset "utf-8";
html {
font-size: 62.5%;
}
h1 {
font-size: 3em;
}
p {
font-size: 1.4em;
}
/*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*/
}
div {
width: 200px;
height: 200px;
background-color: silver;
/*border-radius: 50px;*/
/*-webkit-border-radius: 50px;*/ /*这句为了兼容早期实验阶段的border-radius*/
/*-moz-border-radius: 50px;*/ /*这句同上，但新版本Firefox已经剔除了前缀的写法*/
/*为了将来现在或将来标准化的新版本浏览器兼容*/
border-radius: 50px;
/*-webkit-border-radius: 100px;*/
/*把前缀写在前面，标准写法写在最后面*/
}