vue中實現(xiàn)一個項目里兼容移動端和pc端

更新時間：2022年12月01日 10:00:02 作者：swx980

這篇文章主要介紹了vue中實現(xiàn)一個項目里兼容移動端和pc端問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

一個項目里兼容移動端和pc端

話不多說，上代碼

先來看一下我的文件

在這里插入圖片描述

路由文件 index.js：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
    // pc端
    {
      path: '/',
      name: 'pc/home',
      component: ()=>import("@/components/pc/home"),
    },
    // 手機端
    {
      path: '/mobile/home',
      name: 'mobile/home',
      component: ()=>import("@/components/mobile/home"),
    },
  ]
})

在app.vue中

mounted(){
    if (this._isMobile()) {
      // 手機端
      this.$router.replace("/mobile/home");
    } else {
      // pc端
      this.$router.replace("/");
    }
},
methods：{
 _isMobile() {
      let flag = navigator.userAgent.match(
     /(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
      );
      return flag;
    },
}

vue移動端與PC端適配方案viewport+postcss-px-to-viewport

GitHub文檔地址：https://github.com/evrone/postcss-px-to-viewport

GitHub - evrone/postcss-px-to-viewport: A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.

優(yōu)點

不需要換算及轉(zhuǎn)換系數(shù)
某些屬性不需要轉(zhuǎn)換為REM、VW等
可以全部使用px單位

lib-flexible 作者推薦，方便好用

什么是viewport

viewport翻譯成中文的意思大致是視圖、視窗。在移動端設(shè)備中,整塊顯示屏就相當于視圖、視窗。但這種說法也并不完全正確。因為在移動端設(shè)備中,瀏覽器視圖并不是整個屏幕。因此viewport又被分為了3種 layout viewport(布局視口)、visual viewport（視覺視口）、ideal viewport（理想視口）

為了能夠適配到pc端開發(fā)頁面中,大部分瀏覽器把viewport的寬度設(shè)為了980px 這個瀏覽器默認設(shè)置的視圖被稱為 layout viewport。我們可以使用document.documentElement.clientWidth 來獲取。

由于 layout viewport的寬度是遠大于瀏覽器寬度的，因此我們需要一個新的viewport來代表瀏覽器的可視區(qū)域?qū)挾?，這個視圖則被稱為visual viewport我們可以使用window.innerWidth來獲取。

現(xiàn)在我們已經(jīng)有兩個viewport了,layout viewport 和 visual viewport。但瀏覽器覺得還不夠，因為現(xiàn)在越來越多的網(wǎng)站都會為移動設(shè)備進行單獨的設(shè)計，所以必須還要有一個能完美適配移動設(shè)備的ideal viewport。

ideal viewport 并沒有一個固定的尺寸，不同的設(shè)備擁有不同的 ideal viewport。比如iphone5的 ideal viewport是 320px 而 iphone6s的 ideal viewport卻是 375px

使用方法

下載插件postcss-px-to-viewport
根目錄下創(chuàng)建配置文件postcss.config.js
添加所需要的配置項

//引入?postcss-px-to-viewport
npm?install?postcss-px-to-viewport?--save-dev?

//postcss.config.js
 
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
     unitToConvert: "px", // 要轉(zhuǎn)化的單位       
     viewportWidth: 1920, // UI設(shè)計稿的寬度       
     unitPrecision: 6, // 轉(zhuǎn)換后的精度，即小數(shù)點位數(shù)       
     propList: ["*"], // 指定轉(zhuǎn)換的css屬性的單位，*代表全部css屬性的單位都進行轉(zhuǎn)換     
     viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，默認vw       
     fontViewportUnit: "vw", // 指定字體需要轉(zhuǎn)換成的視窗單位，默認vw      selectorBlackList: ["wrap"], // 指定不轉(zhuǎn)換為視窗單位的類名，       
     minPixelValue: 1, // 默認值1，小于或等于1px則不進行轉(zhuǎn)換       
     mediaQuery: true, // 是否在媒體查詢的css代碼中也進行轉(zhuǎn)換，默認false      
     replace: true, // 是否轉(zhuǎn)換后直接更換屬性值       
     exclude: [/node_modules/], // 設(shè)置忽略文件，用正則做目錄名匹配   
     include: undefined, // 如果設(shè)置了include，那將只有匹配到的文件才會被轉(zhuǎn)換
     landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
     landscapeUnit: 'vw', // 橫屏?xí)r使用的單位
     landscapeWidth: 1920 // 橫屏?xí)r使用的視口寬度    
    }
  }
}

需要注意的配置：

propList: 當有些屬性的單位我們不希望轉(zhuǎn)換的時候，可以添加在數(shù)組后面，并在前面加上!號，如propList: ["*","!letter-spacing"],這表示：所有css屬性的屬性的單位都進行轉(zhuǎn)化，除了letter-spacing的
selectorBlackList：轉(zhuǎn)換的黑名單，在黑名單里面的我們可以寫入字符串，只要類名包含有這個字符串，就不會被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper這樣的類名的單位，都不會被轉(zhuǎn)換

vant組件庫兼容問題

vant組件庫的設(shè)計稿是按照375px來開發(fā)的。因此在viewportWidth為750px時會出現(xiàn)轉(zhuǎn)換問題。

// postcss.config.js
const path = require('path');
 
module.exports = ({ webpack }) => {
  const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
//如果讀取的node_modules中的文件是vant,那么就將設(shè)計稿變?yōu)?75px。如果讀取的文件不是vant的文件,那么就將設(shè)計稿變?yōu)?50px。這樣就可以避免vant組件在750px下出現(xiàn)樣式縮小的問題了。拼接的原因是Windows和iOS系統(tǒng)的路徑轉(zhuǎn)義符不一樣Windows是“/”，ios是“\”
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: viewWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }
}

效果圖：