em与rem的区别
程序员文章站
2022-04-25 09:46:01
...
在css中px、em、rem，这三个的区别是：
- px是固定像素，一旦设置了就无法因为适应页面而改变。
- em是rem相对于px更具有灵活性，他们是相对于长度单位的变化而变化，更适应于响应式布局。
em相对于父元素
rem相对于根元素
em的具体解析：
- 子元素字体大小的em是相对于父元素字体大小
- 元素的width/height/padding/margin用em的话相对于该元素的font-size。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
font-size: 40px;
width: 10em; /* 400px */
height: 10em;
background-color: aqua;
}
p {
font-size: 0.5em;/* 在div的基础上大小再除以2 */
width: 20em; /* 10em表示和font-size同等大小,以此乘除表示放大或缩小几倍 */
height: 10em;
background-color: blueviolet;
}
span {
font-size: 0.5em; /* 在p的基础上大小再除以2 */
width: 10em;
height: 10em;
background-color: chartreuse;
display: block;
}
</style>
</head>
<body>
<div>
我是父亲div
<p>
我是儿子p
<span>孙子span</span>
</p>
</div>
</body>
</html>
rem具体解析：
rem是全部的长度都相当于根元素，根元素是谁？<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位为rem。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html {
font-size: 10px;
}
div {
font-size: 4rem; /* 10px为1rem */
width: 40rem; /* 10px为1rem */
height: 40rem;
background-color: aquamarine;
}
p {
font-size: 2rem; /* 20px */
width: 30rem;
height: 30rem;
background-color: plum;
}
span {
font-size: 1.5rem;
width: 10rem;
height: 10rem;
background-color: peru;
display: block;
}
</style>
</head>
<body>
<div>
我是父亲div
<p>
我是儿子p
<span>孙子span</span>
</p>
</div>
</body>
</html>
当用rem做响应式时(与Bootstrap搭配食用），直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变。
如果帮到你了，可不可以悄咪咪的给我点个赞ʕ•̀ ω • ʔ