详解基于Vue/React项目的移动端适配方案

详解基于Vue/React项目的移动端适配方案

移动端适配问题一直困扰着前端开发人员，特别是在不同设备分辨率差异巨大的情况下。本攻略将详细介绍基于Vue/React项目的移动端适配方案，包括使用vw和rem两种方式进行适配。

什么是vw和rem

vw和rem是移动端适配中比较常用的两种方式。vw是视窗单位，将屏幕宽度分成100份，1vw表示屏幕宽度的1%。rem是根据HTML根元素字体大小来决定页面其他元素的大小的单位，1rem等于HTML根元素字体大小。使用vw和rem可以让页面元素按比例自适应。

使用vw进行适配

使用vw进行适配的步骤如下：

1. 引入postcss-px-to-viewport插件，在项目根目录下的.postcssrc.js文件中进行配置。

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, // UI设计稿的宽度
      viewportHeight: 1334, // UI设计稿的高度
      unitPrecision: 3, // 转换后保留的小数位数
      viewportUnit: 'vw', // 转换成vw单位
      selectorBlackList: ['.ignore', '.hairlines'], // 不转化为vw的类名
      minPixelValue: 1, // 最小的转换数值
        mediaQuery: false // 不允许在媒体查询中使用px
    },
    "postcss-viewport-units":{},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

1. 在样式文件中将px单位转换为vw单位。

/* 对于320px宽度的屏幕 1rem = 20px */

body{
  font-size:2rem;
}

h1{
  font-size: 0.5rem; /* 页面上的字体大小为10px(0.5*20) */
}

.container{
  width: 5rem; /* 页面上的宽度为100px(5*20) */
  height: 6.4rem; /* 页面上的高度为128px(6.4*20) */
}

使用vw进行适配有个优点就是可以不关注设备的具体尺寸，只需要根据设计稿的宽度进行设置即可。

使用rem进行适配

使用rem进行适配的步骤如下：

1. 在根元素HTML上设置字体大小。

/* 对于320px宽度的屏幕 1rem = 20px */

html{
  font-size:20px;
}

1. 在样式文件中将px单位换算为rem单位。

.container{
  width: 5rem; /* 页面上的宽度为100px(5*20) */
  height: 6.4rem; /* 页面上的高度为128px(6.4*20) */
  font-size: 0.5rem; /* 页面上的字体大小为10px(0.5*20) */
}

使用rem进行适配需要手动计算出根元素字体大小，如果设计稿尺寸改变，还需要重新计算根元素字体大小，不太方便。

示例说明

假设设计稿宽度为750px，高度为1334px。

vw示例

在vue项目中，可以先在根组件App.vue中引入postcss-px-to-viewport插件，然后设置统一的根元素字体大小和样式，如下所示：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
/* 对于750px宽度的屏幕 1rem = 10px */

html{
  font-size:75px; /* 1rem = 7.5vw */
}

body{
  font-size:16px;
  color: #333;
}
</style>

然后在其他组件中，可以将px单位直接转化为vw单位，如下所示：

<template>
  <div class="container">
    <h1>hello world</h1>
  </div>
</template>

<style>
.container{
  width: 100vw; /* 页面上的宽度为750px */
  height: 56.25vw; /* 页面上的高度为422px */
  font-size: 2vw; /* 页面上的字体大小为15px */
}
</style>

rem示例

在react项目中，可以先在根组件App.js中设置根元素字体大小和样式，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

class App extends React.Component {
  componentDidMount() {
    document.documentElement.style.fontSize = `${document.documentElement.clientWidth / 7.5}px`;
  }

  render() {
    return (
      <div className="container">
        <h1>hello world</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

然后在其他组件中，可以将px单位直接转化为rem单位，如下所示：

/* 对于750px宽度的屏幕 1rem = 100px */

.container{
  width: 10rem; /* 页面上的宽度为750px */
  height: 4.22rem; /* 页面上的高度为422px */
  font-size: 1.5rem; /* 页面上的字体大小为15px */
}

以上就是基于Vue/React项目的移动端适配方案的详解。