如何利用vw+rem进行移动端布局

利用vw+rem进行移动端布局，可以实现网页在不同设备上的自适应布局，使得页面在任何尺寸的屏幕上都能够完美展示。下面是利用vw+rem进行移动端布局的详细攻略：

1. 使用视窗单位

视窗单位有两种：vw 和 vh。它们的意思是 viewport width 和 viewport height。1vw 等于视窗宽度的 1%，1vh 等于视窗高度的 1%。在这里我们只考虑 vw，因为使用 vw 可以更好的实现移动端布局。

html {
  font-size: 1vw;
}

通过将 html 的 font-size 设置为 1vw，我们使得 1 个视窗宽度被均分成了 100 个部分。比如，如果我们现在将 html 的 font-size 设置为16px，那么 1vw 就等于 16 * 1% = 0.16px。

2. 将rem作为计算单位

CSS 中的 absolute 单位，比如 px，其大小与设备有关，而 rem 则是相对于根元素 html 的 font-size 而言的。由于 html 的 font-size 已被设置成 1vw，因此我们可以将 rem 作为相对长度单位，从而实现对移动端设备的适配。

/* 设计稿宽度为 750px */
@media screen and (max-width: 750px) {
  html {
    font-size: 50px;
  }
}

在上述代码中，我们将 html 的 font-size 设置成 50px，从而使得 1vw = 0.5rem。接下来，我们可以根据设计稿的宽度，选择适当的 font-size，从而实现对移动设备的布局。

示例一

假设我们的设计稿宽度为 750px，我们可以将 font-size 设置为 50px，这样我们可以将设计稿上的尺寸直接除以 50 得到对应的 rem 值。

/* 设计稿尺寸为 150px * 150px */
/* 在样式表中可以这样写 */
.box {
  width: 3rem;
  height: 3rem;
}

在上述代码中，我们将 .box 的宽度和高度都设置为 3rem，这样就可以完美展示在设计稿的大小中。如果在不同尺寸的设备上，html 的 font-size 发生改变，那么我们所设置的尺寸也会跟着改变。

示例二

在实际应用中，我们通常需要对不同尺寸的设备做出不同的布局，下面是一个简单示例，假设我们要实现一个简单的排版，我们想在 iPad 竖屏时，将一排放 3 个 卡片。而在 iPhone4s 竖屏时，我们想将卡片排序成一列。

/* 设计稿宽度为 750px */
@media screen and (max-width: 750px) {
  html {
    font-size: 50px;
  }
  /* 在 iPhone4s 上将卡片排成一列 */
  @media screen and (max-width: 320px) {
    .card {
      width: 280px;
      margin: 15px auto;
    }
  }
}
/* 在 iPad 上将卡片排成3列 */
@media screen and (min-width: 750px) {
  html {
    font-size: 16px;
  }
  .card {
    width: 30%;
    margin: 15px;
    float: left;
    display: inline-block;
  }
}

在上述代码中，我们首先设置了 iPad 的尺寸，将 font-size 设置成 16px，这样可以使得 1vw = 0.16px = 0.01rem。在设置 .card 的宽度时，我们将其设置成 30%，这样就可以让 3 个卡片在 iPad 上平分一排，并使用 float 和 inline-block 属性实现排列。接下来，在 iPhone4s 的尺寸中，我们将 font-size 再次修改为 50px，从而使得 1vw = 0.5rem。然后，我们可以将 .card 的宽度设置为 280px，从而实现一列排列。此外，为了实现居中排列，我们可以设置 margin 为 auto。

通过以上两个简单示例，我们可以看到，利用 vw+rem 进行移动端布局可以极大的简化页面的开发。