掌握REM在PC和移动端的应用，轻松掌控布局自适应

前端

2023-09-07 18:12:57

对于前端开发人员来说，实现跨设备响应式布局至关重要。而REM（Root EM）是一种强大的单位，它可以帮助我们轻松实现这一目标。本文将深入探讨如何在PC端和移动端使用REM，从而创建出适应不同屏幕尺寸的流畅布局。

PC 端

在PC端，使用REM的基本原则很简单：将设计稿的宽度设为基准，将其等分为10份。然后，将根节点的大小设为1/10份的宽度值。这样，1个REM就等于1/10份的宽度。

实践步骤

在CSS中设置根节点的字体大小，使其等于设计稿宽度的1/10。
使用REM单位设置所有元素的尺寸，如宽度、高度和边距。
媒体查询可用于调整不同屏幕尺寸下的布局。

移动端

在移动端，REM的使用方法与PC端类似，但需要考虑视窗（viewport）的存在。视窗是设备屏幕上可视区域的尺寸。

实践步骤

在移动端的meta标签中设置视窗宽度，使其等于设计稿的宽度。
设置根节点的字体大小，使其等于视窗宽度的1/10。
使用REM单位设置所有元素的尺寸，就像在PC端一样。
使用媒体查询根据不同的视窗宽度调整布局。

实例

以下是一个在PC端和移动端使用REM实现响应式布局的简单示例：

<html>
<head>
  <meta name="viewport" content="width=device-width">
  <style>
    :root { font-size: calc(100vw / 10); }
    body { width: 90rem; margin: 0 auto; }
    h1 { font-size: 2rem; }
    p { font-size: 1.2rem; }
    @media (max-width: 600px) {
      body { width: 100vw; }
    }
  </style>
</head>
<body>
  <h1>响应式布局</h1>
  <p>使用REM单位可轻松实现响应式布局。</p>
</body>
</html>