利用 REM 实现响应式设计-JavaScript中文网-JavaScript教程资源分享门户

概述

随着移动设备越来越多地被使用，响应式设计成为前端开发者不可或缺的技能。而REM单位则是实现响应式设计的重要工具之一。本文将详细介绍REM单位的原理和应用方法，并通过示例代码指导如何使用REM实现响应式设计。

REM原理

在CSS中，REM单位指的是相对于根元素html的font-size属性值的倍数。如下所示：

body {
  font-size: 16px;
}
h1 {
  font-size: 2rem; /* 相当于32px */
}

在上面的样式中，h1元素的字体大小为32px，因为其font-size属性值是相对于根元素html的font-size属性值计算的。如果根元素的font-size设定为10px，那么h1的字体大小就是20px了。

使用REM单位的好处是，它能够更好地适应不同分辨率的设备。通过设置根元素的font-size属性值，可以达到适配不同屏幕尺寸的目的。

REM应用

设计稿和字体大小的转换

在实际应用中，一般会将设计师提供的设计稿按照某个标准来转换成REM单位。规定好根元素的font-size，再将设计稿中的像素单位换算成REM即可。

假设设计稿的尺寸是750px*1334px，根元素的font-size设定为10px。那么，设计稿中一个100px宽的按钮的width应该设置为100/75=1.3333rem。

媒体查询

除了设计稿的转换，还可以使用媒体查询来实现响应式设计。在媒体查询中设置根元素的font-size，从而达到适应不同屏幕尺寸的目的。

// javascriptcn.com 代码示例
@media screen and (max-width: 768px) {
  html {
    font-size: 13px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 1024px) {
  html {
    font-size: 15px;
  }
}

在上面的样式中，分别针对不同的屏幕宽度设置不同的根元素font-size。在实际应用中，可以根据不同的业务需求来自定义不同的媒体查询规则。

示例代码

下面是一个使用REM实现响应式设计的示例代码（假设设计稿的尺寸为750px*1334px，根元素的font-size设定为10px）：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <style type="text/css">
    html {
      font-size: 10px;
    }
    body {
      font-size: 1.6rem;
      line-height: 1.5;
    }
    h1 {
      font-size: 2rem;
      margin: 1rem 0;
    }
    .container {
      margin: 0 auto;
      padding: 1rem;
      width: 75%;
      border: 1px solid #ccc;
    }
    .btn {
      display: inline-block;
      margin-right: 1rem;
      padding: 1rem;
      background-color: #eee;
      border: 1px solid #ccc;
    }
    .btn:last-child {
      margin-right: 0;
    }
    @media screen and (max-width: 768px) {
      html {
        font-size: 6.4px;
      }
      .container {
        width: 90%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Demo</h1>
    <p>Some text here.</p>
    <div>
      <a class="btn" href="#">Button 1</a>
      <a class="btn" href="#">Button 2</a>
    </div>
  </div>
</body>
</html>

在上面的示例代码中，使用了REM单位和媒体查询来实现响应式设计。当屏幕宽度小于等于768px时，根元素的font-size设定为6.4px，容器的宽度从75%调整为90%。这样，页面能够更好地适应小屏幕设备的显示效果。

总结

通过本文的介绍，我们了解到了REM单位的原理和应用方法，并学习了如何使用REM实现响应式设计。在实际开发中，我们可以根据不同的业务需求来选择不同的实现方式，并根据设计稿的尺寸和根元素的font-size来进行像素和REM单位之间的转换。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652c9b807d4982a6ebe437e9