项目开发中遇到的css问题总结

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' ]
        }
    }
};

3.动态监听DOM元素高度变化

https://mp.weixin.qq.com/s/qloSqFsJRYfnMy0rf_RyXg