vue如何使用rem适配

下面我来为你详细讲解一下vue如何使用rem适配的完整攻略。

什么是rem适配

当我们在不同尺寸的设备上访问同一个页面时，可能会出现布局和字体大小适配的问题。而rem适配就是为了解决这个问题而出现的一种解决方案。

rem（font-size of the root element）是相对于根元素（即html元素）字体大小的单位。为了实现页面的适配，我们需要将页面元素的尺寸和字体大小改为相对于根元素的大小，这样就可以根据根元素的字体大小来自适应不同屏幕尺寸的设备。

如何在vue中使用rem适配

以下是使用rem适配的具体步骤：

1. 设置html的font-size

   在根组件的mounted方法中设置html的font-size值，代码示例如下：

   js
export default {
mounted() {
const htmlWidth = document.documentElement.getBoundingClientRect().width;
document.documentElement.style.fontSize = htmlWidth / 10 + "px";
}
}

   上面的代码中，我们获取了html元素的宽度，并将其除以10来作为根元素的字体大小。

2. 使用less或sass编写样式

   在编写样式时，我们可以使用less或sass来方便地计算出rem的值。以less为例，代码示例如下：

   ``` less
   @baseFontSize: 14px; // 设计稿字体大小为14px
   @rem: 1rem; // 定义1rem的值

   .example {
   font-size: 1.5rem; // 字体大小为1.5倍的rem
   width: 20 * @rem; // 宽度为20个rem的大小
   height: 10rem; // 高度为10个rem的大小
   }
   ```

如此一来，我们就可以便捷地使用rem适配。

示例说明

下面以两个示例来说明如何使用rem适配：

示例一

在这个示例中，我们使用vue-cli创建了一个空项目，并实现了一个简单的页面。页面上有一个列表，每个列表项的高度、字体大小都使用了rem单位来实现适配。

1. 首先，我们在根组件的mounted方法中设置html的font-size值。代码如下：

   js
export default {
mounted() {
const htmlWidth = document.documentElement.getBoundingClientRect().width;
document.documentElement.style.fontSize = htmlWidth / 10 + "px";
}
}

2. 接着，我们在App.vue中编写样式。使用less来方便计算rem的值。代码如下：

   ``` less
   @designWidth: 750px; // 设计稿宽度为750px
   @rootFontSize: 28px; // 设计稿根元素字体大小为28px

   @media screen and (max-width: @designWidth) {
   html {
   font-size: (@rootFontSize * 100 / @designWidth) * 2;
   }
   }

   .list {
   width: 100%;
   background: #fff;
   margin-top: 20 * @rem;
   padding-bottom: 20 * @rem;
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
   }

   .list-item {
   height: 100 * @rem;
   font-size: 36 * @rem;
   color: #333;
   line-height: 100 * @rem;
   padding-left: 30 * @rem;
   border-bottom: 1px solid #ddd;
   display: flex;
   align-items: center;
   }
   ```

3. 最后，我们在App.vue中编写模板代码。代码如下：

   html
<template>
<div class="list">
<div class="list-item" v-for="item in list" :key="item.id">
{{ item.text }}
</div>
</div>
</template>

通过上述操作，我们就成功地使用了rem适配。

示例二

在这个示例中，我们使用vue-cli创建了一个空项目，并实现了一个简单的登录页面。页面中的表单和按钮都使用了rem单位来实现适配。

1. 首先，我们在根组件的mounted方法中设置html的font-size值。代码如下：

   js
export default {
mounted() {
const htmlWidth = document.documentElement.getBoundingClientRect().width;
document.documentElement.style.fontSize = htmlWidth / 10 + "px";
}
}

2. 接着，我们在Login.vue中编写样式。使用sass来方便计算rem的值。代码如下：

   ``` scss
   $designWidth: 750px; // 设计稿宽度为750px
   $rootFontSize: 28px; // 设计稿根元素字体大小为28px

   @media screen and (max-width: $designWidth) {
   html {
   font-size: ($rootFontSize * 100 / $designWidth) * 2;
   }
   }

   .form {
   width: 80%;
   margin: 60 * $rem auto; // 上下间距60rem，左右自动居中
   }

   .form-item {
   margin-bottom: 40 * $rem; // 上下间距40rem
   }

   .form-input {
   width: 100%;
   height: 100 * $rem;
   font-size: 36 * $rem;
   outline: none;
   border: none;
   background: #f5f6fb;
   padding: 0 30 * $rem;
   box-sizing: border-box;
   }

   .form-button {
   width: 100%;
   height: 100 * $rem;
   font-size: 36 * $rem;
   background: #1c2331;
   color: #fff;
   border: none;
   outline: none;
   cursor: pointer;
   margin-top: 80 * $rem;
   transition: all .3s;
   &:hover {
   background: darken(#1c2331, 10%);
   }
   }
   ```

3. 最后，我们在Login.vue中编写模板代码。代码如下：

   html
<template>
<div class="form">
<div class="form-item">
<input type="text" class="form-input" placeholder="请输入用户名" />
</div>
<div class="form-item">
<input type="password" class="form-input" placeholder="请输入密码" />
</div>
<div class="form-item">
<button class="form-button">登录</button>
</div>
</div>
</template>

通过上述操作，我们就成功地使用了rem适配。