px / % / em /rem / vw / vh* /
- px
- %
- em
1em = 1 * font-size,
5em = 5 * font-size
如果自身有 font-size 的话以自身为准,如果自身 font-size 就是以 em 为单位或者没有 font-size 的话,就会从父容器继承
em 不经常使用,但是有时也会比较好用,在与字符相关的 css ,用 em 比较好。
.duanluo { text-indent: 2em } // 缩进 2 个字符
-
rem
root 跟元素的 font-size 就是 html 元素的 font-size -
vw
.container {
width: 1vw; // 视口宽度的 1%
}
.container {
width: 50vw; // 视口宽度的 50%
}
- vh
.container {
height: 1vh; // 视口高度的 1%
}
.container {
height: 5vh; // 视口宽度的 5%
}
rem统一修改
用 px / em 做单位,每次都要用 js 修改,能不能统一修改呢?
375px -> 1 rem = 20 px;
height = 50 / 20 = 2.5 rem;
750px -> 1 rem = 40 px;
height = 100 / 40 = 2.5 rem;
?(视口宽度) -> 1rem = (? / 375) * 20 px
?(视口宽度) = document.documentElement.clientWidth;
1rem = (document.documentElement.clientWidth / 375) * 20 px
1rem = (document.documentElement.clientWidth / 750) * 40 px
height = 2.5 rem