Open chdyiboke opened 3 years ago
<!--em1-->
<div class="div-em">em</div>
<!--em2-->
<div class="div-em-father">
<div class="div-em-child">em child</div>
</div>
/* em的用法1:自己元素设置font-size的值来当作em的参照值 */
.div-em{
font-size: 32px; // 1em = 32px
width: 10em; // 10em = 10 x 32 = 320px
height: 10em; // 10em = 10 x 32 = 320px
background-color: aquamarine;
}
/* em的用法2:自己元素不设置,而父级元素设置font-size的值来当作em的参照值 */
.div-em-father{
font-size: 64px; // 1em = 64px
}
.div-em-child{
width: 10em; // 10em = 10 x 64 = 640px
height: 10em; // 10em = 10 x 64 = 640px
background-color: cadetblue;
}
rem 与 em的区别:
rem只能在html标签里面设置rem的依赖的值到底是多少 而em是可以在自己元素以及父级元素设置em依赖的值是多少
<!--vh vw-->
<div class="div-vh-vw">
<!--百分比%-->
<div class="div-vh-vw-child"></div>
</div>
/* vh vw 的用法:视窗作为参照值 */
.div-vh-vw{
width: 10vw; // 视窗宽度的 1/10
height: 10vh; // 视窗高度的 1/10
background-color: pink;
}
/* %百分比的用法:父元素的宽高作为参照值 */
.div-vh-vw-child{
width: 50%;
height: 50%;
background-color: aliceblue;
}
vh vw 的用法:视窗作为参照值 %百分比,父元素的宽高作为参照值
100vh就表示满高 100%相对于父元素满宽or高
建议做响应式布局的时候:border用px,font-size用rem,剩下的margin padding这些用em。尽可能的使用100%布局。
建议做响应式布局的时候:border用px,font-size用rem,剩下的margin padding这些用em。尽可能的使用100%布局。
为何???我一直做的都是 border 和 font-size 用px, margin padding 用的是 rem
rem 是根据html节点换算来的 (rem里面的r:root