rem适配布局---1. 基础
Posted deer-cen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了rem适配布局---1. 基础相关的知识，希望对你有一定的参考价值。
1. em
在介绍rem之前，先介绍单位em。em是相对于父元素的字体大小来说的，使用的时候要有父元素，且父元素要有字体大小。
<body>
<div>
<p></p>
</div>
</body><style>
div {
font-size: 12px;
}
/* 1. em是相对于父元素的字体大小来说的 */
p {
/* 10em就是10*12=120px */
width: 10em;
height: 10em;
background-color: pink;
}
</style>2. rem (root em)
与em不同的是，rem不是相对于父级元素的字体大小，而是相对于html元素的字体大小，所以叫做root em。
<body>
<div>
<p></p>
</div>
</body><style>
html {
font-size: 14px;
}
div {
font-size: 12px;
}
/* 2. rem是相对于html元素的字体大小来说的 */
p {
/* 10rem就是10*14=140px */
width: 10rem;
height: 10rem;
background-color: pink;
/* 这就生成了140px*140px的粉色盒子了 */
}
</style>rem的优点就是可以通过修改html里面文字的大小来改变页面中元素的大小可以整体控制。
以上是关于rem适配布局---1. 基础的主要内容，如果未能解决你的问题，请参考以下文章