淺談vue 移動端完美適配方案

更新時間：2021年09月18日 08:32:09 作者：前端一課

最近接觸了一個項目，vue怎么在不同屏幕上做根據(jù)不同屏幕大小適配，本文就詳細的來介紹一下，感興趣的可以了解一下

前言：根據(jù)最近做的一個醫(yī)療手機端項目總結(jié)在移動端，vue怎么在不同屏幕上做根據(jù)不同屏幕大小適配

1、適配方案

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

首先介紹一下amfe-flexible

amfe-flexible 是配置可伸縮布局方案，主要是將 1rem 設(shè)為 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其中之一配置，權(quán)重從左到右降低，沒有則新建文件，只需要設(shè)置其中一個即可：

為了方便我是在 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根據(jù)設(shè)計稿寬度除以10進行設(shè)置，這邊假設(shè)設(shè)計稿為375，即rootValue設(shè)為37.5；
2、propList是設(shè)置需要轉(zhuǎn)換的屬性，這邊*為所有都進行轉(zhuǎn)換。

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

比如項目中我們這樣寫：

.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)出就是下面這樣的，插件實惠幫我們自動轉(zhuǎn)換單位。

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

到此這篇關(guān)于vue 移動端完美適配方案的文章就介紹到這了,更多相關(guān)vue 移動端完美適配方案內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: