一種開箱即賊好用的移動端適配方案
- 2020 年 4 月 11 日
- 筆記
主角是誰
- 在今天這篇文章中，我並不會在這裡講一些移動端視口的概念，包括物理像素和邏輯像素，理想視口，dpr等等等等，我只介紹這樣一種非常不錯的移動端適配方案：
post-css-to-viewport，如果我說這種方案能解決98%以上的移動端布局痛點，我想整個部落格園，應該沒有人會反駁。
痛點在哪裡
在之前有一種流行已久的移動端適配方案，那就是rem，我想下面這兩句程式碼，有不少老移動端都不會陌生：
const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';
- 沒錯，在那個移動端UI稿尺寸為
750*1334滿天飛的時代，這兩句程式碼確實給開發者帶來了很大的方便，這樣設置根font-size後，px和rem的轉換比例成了100, 為比如UI稿一個長寬分別為120px*40px，那麼開發者對應的寫成1.2rem*0.4rem就可以了 - 這種換算已經是頗為方便，但是並非所有的項目都能這樣去設置一個方便換算的比例係數，當比例係數為100時，小數點往前面挪兩位就行了，然而有的項目設置的換算係數千奇百怪，有50的，有16的，很多已經嚴重超出口算力所能及的範疇了。所以後來誕生的
px-to-rem或者px2rem就是為了解決這個問題 - 當然，這仍沒有給css帶來多少簡潔的清流，因為人們有時候不需要去轉換一些單位，比如字體大小
font-size，有不少人希望給字體設置一個固定的px，它不會隨著設備的不同而轉換成rem，因為這樣在一些平板設備上顯得太大了
人們希望有這樣一種方案…
- 首先，無論換算方不方便，我都不想換算（就是這麼懶?），我也不想去操心什麼轉換係數
- 其次，有些屬性或者類選擇器我不想進行轉換
- css程式碼要足夠簡潔，我只希望看到一種單位，那就是px
現在，它來了
postcss-px-to-viewport就是這樣一款優秀的插件，它解決了以上提到的痛點，也滿足以上提到的理想要求。它將px轉換成視口單位vw，眾所周知，vw本質上還是一種百分比單位，100vw即等於100%，即window.innerWidth
在vue項目中引入試試
- 我們先把它安裝到項目的開發環境中：
npm i postcss-px-to-viewport -D
- 在項目根目錄下添加
.postcssrc.js文件 - 添加如下配置：
module.exports = {
plugins: {
autoprefixer: {}, // 用來給不同的瀏覽器自動添加相應前綴，如-webkit-，-moz-等等
"postcss-px-to-viewport": {
unitToConvert: "px", // 要轉化的單位
viewportWidth: 750, // UI設計稿的寬度
unitPrecision: 6, // 轉換後的精度，即小數點位數
propList: ["*"], // 指定轉換的css屬性的單位，*代表全部css屬性的單位都進行轉換
viewportUnit: "vw", // 指定需要轉換成的視窗單位，默認vw
fontViewportUnit: "vw", // 指定字體需要轉換成的視窗單位，默認vw
selectorBlackList: ["van"], // 指定不轉換為視窗單位的類名，
minPixelValue: 1, // 默認值1，小於或等於1px則不進行轉換
mediaQuery: true, // 是否在媒體查詢的css程式碼中也進行轉換，默認false
replace: true, // 是否轉換後直接更換屬性值
exclude: [/node_modules/], // 設置忽略文件，
landscape: false // 是否處理橫屏情況
}
}
};
- 重新運行項目，使配置文件生效
- 我們寫一段測試程式碼來驗證一下：
<template>
<div class="test-viewport">測試轉換</div>
</template>
<style lang="less" scoped>
.test-viewport {
width: 750px;
height: 100px;
font-size: 40px;
text-align: center;
line-height: 100px;
background: #13b5b1;
}
</style>
- 打開控制台，可以看到已經進行了轉換
需要注意的配置
propList: 當有些屬性的單位我們不希望轉換的時候，可以添加在數組後面，並在前面加上!號，如propList: ["*","!letter-spacing"],這表示：所有css屬性的屬性的單位都進行轉化，除了letter-spacing的selectorBlackList：轉換的黑名單，在黑名單裡面的我們可以寫入字元串，只要類名包含有這個字元串，就不會被匹配。比如selectorBlackList: ['van'],它表示形如van,van-tab,tab-van,vant這樣的類名的單位，都不會被轉換
本文使用 mdnice 排版
