首页 > 其他分享 >em与rem的区别

em与rem的区别

时间:2022-09-05 09:55:16浏览次数:46  
标签:em 区别 height width rem font size

在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作为单位的元素的大小都会相应改变。

标签:em,区别,height,width,rem,font,size
From: https://www.cnblogs.com/-ZhouYi--/p/16657029.html

相关文章