移动端前端开发：Vue/React通用适配方案

2023-11-18 07:25:34

导语

随着移动互联网的发展，移动端开发已成为前端开发的重要方向。Vue和React作为当今最受欢迎的前端框架，因其强大的功能和社区支持，成为移动端开发的绝佳选择。本文将详细介绍如何使用Vue或React快速构建响应式移动端应用，通过灵活的适配方案，无需再为移动设备适配而烦恼。您将学会根据不同屏幕尺寸调整布局，并获得代码实例和项目搭建指南，以帮助您快速打造跨平台移动应用。

移动端适配方案

针对移动端适配，前端开发中常见的三种方案分别是：rem适配、vw适配和flexible适配。其中，flexible适配因其简单易用、兼容性好，在Vue和React中均可轻松实现，因而本文将重点介绍flexible适配方案。

Flexible适配原理

Flexible适配的原理是通过在根元素（html）上设置font-size，来控制其他元素的尺寸。具体来说，当您将根元素的font-size设置为100px时，其他元素的尺寸将以这个100px为基准进行换算。这样，无论设备屏幕尺寸如何，您都可以通过调整根元素的font-size来控制其他元素的尺寸，从而实现响应式布局。

Flexible适配实现

在Vue或React中实现flexible适配非常简单，只需在根元素上设置font-size即可。例如，在Vue中，您可以在main.js文件中添加如下代码：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

//flexible适配
(function(doc, win) {
  let docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      let clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

在React中，您可以在index.js文件中添加如下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

//flexible适配
(function(doc, win) {
  let docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      let clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);