<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>px,em,rem</title>
</head>
<body>
<h3>元素的单位</h3>
<div>px</div>
<div>em</div>
<div>rem</div>
<style>
html {
/*浏览器默认为16px*/
/*font-size: 16px;*/
/*谷歌文本最小12px,设置为10px无效*/
/*font-size: 10px;*/
}
.px {
font-size: 20px;
width: 100px; /*px,相对于屏幕*/
height: 100px; /*后面有line-height,此处可选*/
background-color: lightgreen;
text-align: center;
line-height: 100px;
}
.em {
font-size: 20px;
width: 5em; /*em,相对于当前元素或父元素文本大小*/
height: 5em;
background-color: lightblue;
text-align: center;
line-height: 100px;
}
/*css3新增单位*/
.rem {
font-size:1.25rem;
width: 6.25rem; /*em,相对于根html元素文本大小*/
height: 6.25rem;
background-color: lightcoral;
text-align: center;
line-height: 6.25rem;
}
</style>
</body>
</html>