vue中移動端適配

最近需要完全新建vue項目,基於vue-cl3搭建項目框架時，又開始糾結px,rem等單位問題，看了很多博客

目前最好用的單位是rem、vw

目前最常用的適配方案是：

普通元素：按照設計稿大小，使用px，再利用工具轉化為rem

font字體大小：使用px不進行rem轉化，對不同的dpr分別設置大小，類似如下：

div {
    width: 1rem;
    height: 0.4rem;
    font-size: 12px; // 默認寫上dpr為1的fontSize
}
[data-dpr="2"] div {
    font-size: 24px;
}
[data-dpr="3"] div {
    font-size: 36px;
}　　

為了方便，可利用less，sass的函數

@mixin font-dpr($font-size){
    font-size: $font-size;
 
    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }
 
    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}　　

圖片： 在高清手機下，對圖片清晰度要求比較高時，圖片切為二倍圖2x和三倍圖3x,對不同的dpr使用不同大小的圖片，類似如下

// 背景圖片，此方法是stylus的寫法，僅供理解
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")　　

以下為：在vue-cli3構建的項目中使用rem

vue中使用rem，最終選擇的方案是lib-flexible+px2rem-loader

使用rem最關鍵的兩個步驟便是：動態設置html的font-size大小和把設計稿的px手動轉化為rem

lib-flexible會自動在html的head中添加一個meta name="viewport"的標簽，同時會自動設置html的font-size為屏幕寬度除以10
所以若屏幕寬度為414，html的font-size的大小自動設置為41.4px

由此lib-flexible便解決了動態設置html的font-size大小的問題，同時由於會自動設置meta 標簽，所以以前我們喜歡在移動端加的meta便不需要自己添加了

px2rem-loader可以把px轉化為rem,配置好后只需要按設計稿大小寫px就行了，不需要考慮轉為rem的問題

以下為vue-cli3中的配置：

1.安裝

npm install lib-flexible --save
npm install px2rem-loader --save

2、引入lib-flexible

在項目入口文件main.js 中引入lib-flexible

import 'lib-flexible'

3、去掉目標文件的index.html頭里的meta標簽。

public/index.html中去掉此行代碼

 

4.vue.config.js中配置css.loaderOptions

module.exports = { 

css: {
    loaderOptions: {
        postcss: {
            plugins: [
                require('postcss-plugin-px2rem')({
                    rootValue: 75, //換算基數， 默認100 
                    // unitPrecision: 5, //允許REM單位增長到的十進制數字。
                    //propWhiteList: [],  //默認值是一個空數組，這意味着禁用白名單並啟用所有屬性。
                    // propBlackList: [], //黑名單
                    exclude: /(node_module)/,  //默認false，可以（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)/ 。如果想把前端UI框架內的px也轉換成rem，請把此屬性設為默認值
                    // selectorBlackList: [], //要忽略並保留為px的選擇器
                    // ignoreIdentifier: false,  //（boolean/string）忽略單個屬性的方法，啟用ignoreidentifier后，replace將自動設置為true。
                    // replace: true, // （布爾值）替換包含REM的規則，而不是添加回退。
                    mediaQuery: false,  //（布爾值）允許在媒體查詢中轉換px。
                    minPixelValue: 3 //設置要替換的最小像素值(3px會被轉rem)。 默認 0
                })
            ]
        }
    }
},
}

此時rootValue為75是因為設計稿為750px，為375的二倍設計圖
若在375下：html,font-size會被設置為：37.5px
設計稿上div的width為750px，我們在css中就直接寫750px;
計算結果為：750/75*37.5=375px,剛好符合我們的預期
所以rootValue大小根據設計稿尺寸/10,若設計稿寬度為375px，rootValue: 37.5

 

 

 

vw的還沒研究好，以后再記錄啦