vue 实现 rem 布局或vw 布局的方法

一、使用 rem 实现响应式布局

1. 设置 rem 基准值

首先要设置 HTML 根元素的 font-size 值为屏幕宽度的百分之一。这样，当设备宽度发生变化时，根元素的 font-size 值也会跟着变化，从而实现响应式的布局。

html {
  font-size: calc(100vw / 7.5); /* 以 iPhone6/7/8 为标准，1rem = 100px */
}

1. 使用 rem 进行布局

在进行页面布局时，使用 rem 作为单位代替 px，即可实现基于 rem 的响应式布局，示例代码如下：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.box {
  width: 2rem;
  height: 2rem;
  background-color: red;
}

以上代码中，使用 flex 布局使容器元素内的子元素均分父容器宽度；同时，子元素的宽高都设置为 2rem，由于我们已经设置了 HTML 根元素的 font-size 值，所以这里的实际宽度是根据屏幕宽度来计算的。

1. 针对不同屏幕宽度设置不同的 rem 值

如果想要在不同屏幕宽度下设置不同的 rem 值，可以使用媒体查询来实现，示例代码如下：

@media screen and (max-width: 767px) {
  html {
    font-size: calc(100vw / 10); /* 以 10 作为基准值 */
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: calc(100vw / 7.5); /* 以 7.5 作为基准值 */
  }
}

二、使用 vw 实现响应式布局

1. 设置 vw 基准值

和 rem 布局类似，首先我们需要设置 HTML 根元素的 font-size 值为屏幕宽度的百分之一。但是这里不是使用 rem 作为单位，而是使用 vw 和 vh。

html {
  font-size: 1vw;
}

1. 使用 vw 进行布局

在进行页面布局时，使用 vw 作为单位代替 px，即可实现基于 vw 的响应式布局，示例代码如下：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  width: 100vw;
  display: flex;
  justify-content: space-around;
}

.box {
  width: 20vw;
  height: 20vw;
  background-color: red;
}

以上代码中，使用 flex 布局使容器元素内的子元素均分父容器宽度；同时，子元素的宽高都设置为 20vw，这样就可以根据屏幕宽度自适应地计算实际宽度了。

1. 针对不同屏幕宽度设置不同的 vw 值

如果想要在不同屏幕宽度下设置不同的 vw 值，同样也可以使用媒体查询来实现，示例代码如下：

@media screen and (max-width: 767px) {
  html {
    font-size: 5vw; /* 以 5 作为基准值 */
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 7.5vw; /* 以 7.5 作为基准值 */
  }
}

以上就是使用 rem 或 vw 实现响应式布局的攻略，希望对你有所帮助。