Weex 的文本大小庆揩,使用px作為單位在手機端和網(wǎng)頁端效果不一致喻频,有個簡單的解決辦法茸俭, 使用weex 的單位 wx
<text style="font-size: 14wx; color: #333333">weex</text>
經(jīng)過測試發(fā)現(xiàn)的猛,14wx 在Android和 iOS下效果是一致的,和html的28px差不多
可以在寫weex代碼的時候氛雪,把wx作為字體的單位
.text-title {
font-size: 16wx;
}
.text-content {
font-size: 15wx;
}
問題來了房匆,html 不支持 wx 怎么辦, 可以使用自定義loader在編譯時把wx替換為px
通過測試比較,可以得出 1wx 約等于 2px
新建 web-h5-font-size-loader.js
module.exports = function (source) {
source = source.replace(/(\d{1,3})wx/g, function (con, $1) {
// 1wx = 2px 想要更精確的报亩,需要通過分辨率浴鸿,屏幕密度比計算
return `${ $1 * 2 }px`
})
return source;
}
配置 loader
config/webpack.common.conf.js
在webConfig的module下添加代碼,引入新建的自定義loader
module: {
rules: [
......, //原有的配置不變
{
test: /\.vue$/,
use: [
{
loader: path.resolve('loaders/web-h5-font-size-loader.js'),
}
]
}
]
}
loader 起作用后弦追,會在編譯時自動把 1wx 換為 2px