如何基于viewport vm适配移动端页面

下面为您详细讲解如何基于viewport和vm适配移动端页面：

步骤一：设置viewport

在移动端开发中，要实现页面的适配，首要的一步是要设置viewport。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

上述代码就是设置viewport的标准写法。其中，width=device-width表示让页面的宽度等于设备的宽度；initial-scale=1.0则表示页面的初始缩放比例为1。

步骤二：使用vw和vh

在移动端开发中，我们通常使用vw（Viewport Width）和vh（Viewport Height）来实现页面的适配，因为它们可以直接根据视口大小来计算元素的大小。

例如，如果我们想让一个盒子的宽度占满整个视口宽度，可以这样写：

.box {
  width: 100vw;
}

上述代码中，vw表示视口宽度的百分比，100vw就表示整个视口的宽度。通过这个方法，我们就能让一个元素始终占满整个视口的宽度。

同理，如果我们想让一个盒子的高度等于视口高度的50%，可以这样写：

.box {
  height: 50vh;
}

上述代码中，vh表示视口高度的百分比，50vh就表示整个视口的高度的一半。通过这个方法，我们就能让一个元素始终等于视口高度的50%。

示例1：使用vw实现字体大小的适配

在移动端开发中，我们经常需要根据不同设备的屏幕大小来调整页面的字体大小。而使用vw可以让字体大小自适应，不用额外设置。

例如，我们想让页面的标题字体大小自适应屏幕大小，可以这样写：

h1 {
  font-size: 5vw;
}

上述代码中，5vw表示标题的字体大小随视口宽度的变化而变化，这样就能实现自适应了。

示例2：使用vw和媒体查询实现布局的适配

在移动端开发中，我们还需要实现不同设备下的布局适配，这时候可以使用vw和媒体查询来实现。

例如，我们想让一个页面在页面宽度小于500px的设备上采用一列布局，在页面宽度大于500px的设备上采用两列布局，可以这样写：

.item {
  width: 100vw;
}

@media screen and (min-width: 500px) {
  .item {
    width: 50vw;
    float: left;
  }
  .item:nth-child(odd) {
    clear: both;
  }
}

上述代码中，.item表示每个元素占据整个视口的宽度，这样就能保证在任何设备上都能占满整行。而在500px以上的设备上，我们使用了媒体查询来将每个元素的宽度设置为50vw，这样就能实现两列布局。并且，通过对奇偶元素的选择器设置clear属性，可以让每两个元素成一行，避免两列元素之间出现间隔。

以上就是基于viewport和vw/vh的移动端适配攻略，希望能对您有所帮助。