VUE2移动端适配

最新推荐文章于 2024-12-09 08:51:00 发布

原创最新推荐文章于 2024-12-09 08:51:00 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

vue移动端适配专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何通过amfe-flexible和px2rem-loader来解决移动端页面适配问题。首先，通过npm安装amfe-flexible并在main.js中引入。然后修改HTML文件的viewport元标签。接着，安装px2rem-loader，并在vue.config.js中配置webpack，将px单位转换为rem。然而，作者在实际应用中发现偶尔出现适配问题，因此考虑更换适配解决方案。

插件：amfe-flexible、px2rem-loader。

使用postcss-pxtorem和amfe-flexible适配后，在真机中遇到偶尔不能适配的问题，考虑很久，决定换了插件。

一：安装amfe-flexible

1、npm安装

npm install -S amfe-flexible

2、main.js中引入

import 'amfe-flexible/index'

3、修改public下的index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

二、安装px2rem-loader

1、npm安装

npm install px2rem-loader

2、vue.config.js中配置

module.exports = {
    chainWebpack:config => {
        config.module.rule('less')
        .test(/\.less$/)
        .rule('scss')
        .test('/\.scss')
        .oneOf('vue')
        .use('px2rem-loader')
        .loader('px2rem-loader')
        .before('postcss-loader')
        .options({remUnit:75,remPrecision:8})
        .end()
    }
}