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

二、引入lib-flexible

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

import 'lib-flexible'

三、去掉目標文件的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的還沒研究好，之後再記錄啦