vw+rem让移动端布局简单到犯规！

2023-12-28 04:02:34

不管是面试还是工作过程中，移动端的布局都比较常见，而移动端适配方法也是多种多样。一般来说，主要还是从viewport、rem、百分比几个点下手。一般来说，开发过程中，我们希望能够直接按照设计图来开发，不管设计图是两倍还是三倍图，能够直接写设计图尺寸而不需要换算，同时有高质的设备像素比效果。那么现在就一起来看看怎样实现吧！

01 、设置视口meta标签

viewport是移动端页面用来指定视口的meta标签，一般在页面的head标签中添加，其作用是设置移动端的视口参数。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

width=device-width：指定视口的宽度与设备的宽度一致，保证网页在任何屏幕上都能正常显示。
initial-scale=1：指定视口的初始缩放比例为1，也就是说网页在打开时不会被缩放。
minimum-scale=1：指定视口的最小缩放比例为1，保证网页不会被缩小到小于原始尺寸。
maximum-scale=1：指定视口的最大缩放比例为1，保证网页不会被放大到大于原始尺寸。
user-scalable=no：禁止用户对网页进行缩放。

02 、使用rem单位

rem是css3中新增的单位，它相对于根元素font-size的长度。在移动端布局中，一般会将html元素的font-size设置为100px，这样1rem就等于100px。好处在于，当用户调整浏览器的字体大小时，网页的字体也会随之变化，保证网页的可读性。

html {
  font-size: 100px;
}

body {
  font-size: 1.6rem;
}

h1 {
  font-size: 2.4rem;
}

03 、灵活使用百分比

在移动端布局中，百分比单位也是非常常用的。百分比单位相对于父元素的长度，因此可以实现元素的相对布局。

.container {
  width: 100%;
  height: 100vh;
}

.header {
  width: 100%;
  height: 10%;
}

.content {
  width: 100%;
  height: 80%;
}

.footer {
  width: 100%;
  height: 10%;
}

04 、实战应用

现在，让我们将这些知识应用到实际项目中。假设我们有一个移动端的页面，需要实现以下布局：

头部高度为100px，背景色为红色。
内容区高度为80%，背景色为白色。
底部高度为100px，背景色为蓝色。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  
  <style>
    html {
      font-size: 100px;
    }

    body {
      font-size: 1.6rem;
    }

    .container {
      width: 100%;
      height: 100vh;
    }

    .header {
      width: 100%;
      height: 10%;
      background-color: red;
    }

    .content {
      width: 100%;
      height: 80%;
      background-color: white;
    }

    .footer {
      width: 100%;
      height: 10%;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
  </div>
</body>

</html>