vue 專案移動端適配-不同解析度DPR頁面及字型大小適配

阿新 • • 發佈：2021-12-24

1.前言：

使用vue開發移動端的時候，不同裝置螢幕解析度的適配是個比較頭疼的問題。可以通過外掛將px轉化為rem很好的實現移動端的適配。

2.外掛：

px2rem-loader：根據配置基準，自動將px轉化為rem

ib-flexible: 根據跟節點頁面視口變化而變化font-size大小。

3.實現：

3.1：外掛安裝

px2rem-loader安裝：npm install px2rem-loader --save

ib-flexible:安裝：npm install lib-flexible --save

3.2：配置

build目錄下utils.js檔案

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5//根據UI給的設計稿來這裡以375*667為例
    }
  }

截圖：

然後在同一個檔案中（build目錄下utils.js檔案）紅色的地方

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader 
]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
       
return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

專案入口檔案：index.html 新增紅色程式碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>ctposh5</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js引入：lib-flexible/flexible： import 'lib-flexible/flexible'

vue 專案移動端適配-不同解析度DPR頁面及字型大小適配

1.前言：使用vue開發移動端的時候，不同裝置螢幕解析度的適配是個比較頭疼的問題。可以通過外掛將px轉化為rem很好的實現移動端的適配。

Vue專案移動端滾動穿透問題的實現

概述今天在做 Vue 移動端專案的時候遇到了滾動穿透問題，在網上查資料後，選取了我覺得最好的方法，記錄下來供以後開發時參考，相信對其他人也有用。

vue專案PC端如何適配不同解析度螢幕

來源：https://www.cnblogs.com/shun1015/p/14755655.html 配置前言專案構建：基於vue-cli3構建，使用postcss-px2rem px2rem-loader外掛進行rem適配實現原理：每次打包，webpack通過使用外掛postcss-px2rem，幫