前言：根據最近做的一個醫療手機端專案總結在移動端，怎麼在不同螢幕上做根據不同螢幕大小適配

1、適配方案

在本專案中我所使用的vue移動方案是使用amfe-flexible 和 post-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.中引入才能使用

import 'amfe-flexible';

這樣引入就OK了

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

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

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

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

在.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(-5http://www.cppcns.com0%,-50%);
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    .title {
      position: absolute;
      top: -50px;
http://www.cppcns.com      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 移動端完美適配方案的文章就介紹到這了,更多相關vue 移動端完美適配方案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章AdlgSCUV希望大家以後多多支援我們！