rem简介与使用

最新推荐文章于 2021-07-26 11:35:56 发布

云端的幻影

最新推荐文章于 2021-07-26 11:35:56 发布

阅读量677

点赞数

分类专栏： css 文章标签： rem css3rem rem的用处 rem的使用

本文链接：https://blog.csdn.net/weixin_44849078/article/details/90058895

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>