ps: 如果有任何问题可以评论留言,我看到后会及时解答,评论或关注,您的鼓励是我分享的最大动力
转载请注明出处:https://blog.csdn.net/qq_40938301/article/details/87836588
区别
在css中单位长度用的最多的是px、em、rem,这三个的区别是:
px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。
对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。
rem中的r意思是root(根源),这也就不难理解了。
具体解释
既然em和rem都是相对长度单位,那么肯定要有一个长度属性作为相对的参照,而这个长度属性便是 font-size
1、em
em 是相对于父元素的 font-size 的长度
eg:如果父元素div的 font-size 为40px , 那么子元素p的 font-size = 0.5 em = 0.5 * 40px = 20px ,
孙元素span的 font-size = 0.5 em = 0.5 * 20px = 10px
<div>
父元素div
<p>
子元素p
<span>孙元素span</span>
</p>
</div>
div {
font-size: 40px;
width: 10em; /* 400px */
height: 10em;
border: solid 1px black;
}
p {
font-size: 0.5em; /* 20px */
width: 10em; /* 200px */
height: 10em;
border: solid 1px red;
}
span {
font-size: 0.5em;
width: 10em;
height: 10em;
border: solid 1px blue;
display: block;
}
2、rem
rem 是相对于根元素即 html 的 font-size 的长度
eg: div 的 font-size = 4 rem = 4*10px = 40px
p 的 font-size = 2 rem = 2*10px = 20px
html {
font-size: 10px;
}
div {
font-size: 4rem; /* 40px */
width: 30rem; /* 300px */
height: 30rem;
border: solid 1px black;
}
p {
font-size: 2rem; /* 20px */
width: 15rem;
height: 15rem;
border: solid 1px red;
}
span {
font-size: 1.5rem;
width: 10rem;
height: 10rem;
border: solid 1px blue;
display: block;
}
3、62.5%
使用 rem 时,多数都是:
.html{font-size:62.5%;}
这是因为任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px。那么12px=0.75rem,10px=0.625rem。为了简化font-size的换算,需要在css中的body选择器中声明 font-size=62.5%,这就使rem值变为 16px*62.5%=10px, 这样12px=1.2rem, 10px=1rem, 也就是说只需要将你的原来的px数值除以10,然后换上rem作为单位就行了。
目的
使用em 或 rem 作为单位,主要是便于 其在移动端的自适应性