1.数字不等宽的问题
对于数字来说,每个数字的宽度都不一定是相等的。比如说对于 1 和 2 来说,从 1 变成 2 的时候宽度一定会发生变化。如果此时周围有元素的话,就会造成元素位置的偏移。
当遇到这种情况时,我们可以通过 font-variant-numeric[1] 属性来实现数字的等宽。
font-variant-numeric CSS 属性控制数字,分数和序号标记的替代字形的使用。tabular-nums 启用表格数字显示。使数字等宽,易于像表格那样对齐。等同于 OpenType 特性 tnum。
除了这个属性之外,我们也可以通过 font-feature-settings: "tnum" 来实现相同的功能。这个属性的兼容性会更好点:
2.使用pxtorem插件的时候1px的转换在安卓端不显示的问题,设置minPixelValue的最小值为2 ,当1px的时候不转换
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue({ file }) {
// return file.indexOf('vant') !== -1 ? 37.5 : 75;
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: [ '*' ], //(数组)可以从px更改为rem的属性
minPixelValue: 2
},
autoprefixer: {
overrideBrowserslist: [ 'defaults', 'ios >= 6.0' ]
}
}
};