vue移動端完美適配的示例分析

這篇文章主要介紹了vue移動端完美適配的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1、適配方案

在本項目中我所使用的vue移動方案是使用amfe-flexible 和 postcss-pxtorem 結合）的方式。

首先介紹一下amfe-flexible

amfe-flexible 是配置可伸縮布局方案，主要是將 1rem 設為 viewWidth/10。

然后就是這個庫 postcss-pxtorem

postcss-pxtorem是postcss的插件，用于將像素單元生成rem單位。

2、如何使用和配置？

1、安裝 amfe-flexible 和 postcss-pxtorem

npm install amfe-flexible --save
npm install postcss-pxtorem --save

2、安裝完成后，肯定需要引入才能使用

我們需要在main.js中引入才能使用

import 'amfe-flexible';

這樣引入就OK了

3、然后就是postcss-pxtorem 配置步驟

配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，權重從左到右降低，沒有則新建文件，只需要設置其中一個即可：

為了方便 我是在 vue.config.js 配置的代碼配置如下：

module.exports = {
    //...其他配置
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
}

在.postcssrc.js或postcss.config.js中配置如下：

module.exports = {
    "plugins": {
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

注意點：
1、rootValue根據設計稿寬度除以10進行設置，這邊假設設計稿為375，即rootValue設為37.5；
2、propList是設置需要轉換的屬性，這邊*為所有都進行轉換。

通過以上配置我們就可以在項目使用了。

比如項目中我們這樣寫：

.login-form {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    .title {
      position: absolute;
      top: -50px;
      font-size: 24px;
      color: #fff;
      left: 0;
      right: 0;
      text-align: center;
    }
  }

那我們代碼的產出就是下面這樣的 ，插件實惠幫我們自動轉換單位。

login-wraper .login-form {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    padding: .53333rem; // 注意這個就是轉換后的單位
    box-sizing: border-box;
    border-radius: .26667rem;  // 注意這個就是轉換后的單位
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue移動端完美適配的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!