vue移動(dòng)端完美適配的示例分析

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

1、適配方案

在本項(xiàng)目中我所使用的vue移動(dòng)方案是使用amfe-flexible 和 postcss-pxtorem 結(jié)合）的方式。

首先介紹一下amfe-flexible

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

然后就是這個(gè)庫 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其中之一配置，權(quán)重從左到右降低，沒有則新建文件，只需要設(shè)置其中一個(gè)即可：

為了方便 我是在 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: ['*']
        }
    }
}

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

通過以上配置我們就可以在項(xiàng)目使用了。

比如項(xiàng)目中我們這樣寫：

.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;
    }
  }

那我們代碼的產(chǎn)出就是下面這樣的 ，插件實(shí)惠幫我們自動(dòng)轉(zhuǎn)換單位。

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

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