rem简介与使用

css3的rem

  • 1、认识rem
  • 2、rem的用处

1、认识rem

rem是CSS3中新增加的一个单位值,和em单位一样,都是一个相对单位。但是rem是根据根元素(html)的font-size来计算的,如下面这段代码,当浏览器最大宽度达到1920px时1rem=100px;最大宽度为1680px时1rem=14px;

  @media screen and (max-width:1920px) {
    font-size: 100px;
  }
  @media screen and (max-width:1680px) {
    font-size: 14px;
  }

2、rem的用处

以下面代码为例,如果我们想要在手机上水平居中显示2排各5个boxDiv的效果的话,boxDiv高宽如果使用px的,不论设计稿如何完美,都只能适配一种大小的屏幕,大屏幕或者小屏幕下会出现一排boxDiv数量过多或者过少的情况。
如果使用rem,boxDiv高宽为10rem,文字大小为3rem,当浏览器页面宽度达到414px、375px、320px时,1rem分别等于16px、14px、12px;对应的高宽与文字大小也发生了改变,各个大小的页面下显示效果都是一致的。
rem与媒体查询配合(@media)使用,适用于移动端或者需要自适应的pc端界面。

<!DOCTYPE html>
<html>
  <head>
    <title>测试</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <style>
      @media screen and (max-width:414px) {
        html{
          font-size: 16px; // 页面宽度为414px时1rem为16px;
        }
      }
      @media screen and (max-width:375px) {
        html{
          font-size: 14px;
        }
      }
      @media screen and (max-width:320px) {
        html{
          font-size: 12px;
        }
      }
      .parentDiv{
        text-align: center;
      }
      .boxDiv{
        display: inline-block;
        height:10rem;
        width:10rem;
        margin: 0 1rem 1rem 0;
        background-color:red;
        font-size: 3rem;
        color: #fff;
        text-align: center;
        line-height: 10rem;
      }
    </style>
  
    <div class="parentDiv">
      <div class="boxDiv">1</div>
      <div class="boxDiv">2</div>
      <div class="boxDiv">3</div>
      <div class="boxDiv">4</div>
      <div class="boxDiv">5</div>
      <div class="boxDiv">6</div>
      <div class="boxDiv">7</div>
      <div class="boxDiv">8</div>
      <div class="boxDiv">9</div>
      <div class="boxDiv">10</div>
    </div>
  </body>
</html>

rem简介与使用_第1张图片rem简介与使用_第2张图片rem简介与使用_第3张图片

你可能感兴趣的:(css)