第20章 CSS3前缀和rem

iteye_17658

于 2015-07-30 22:54:06 发布

阅读量109

点赞数

分类专栏：阅-H5

阅-H5 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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;*/
	/*把前缀写在前面，标准写法写在最后面*/
}