H5 使用Vant自适应布局 (postcss-pxtorem)

最新推荐文章于 2025-10-15 11:07:56 发布

原创

最新推荐文章于 2025-10-15 11:07:56 发布 · 907 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#postcss #前端 #javascript

本文介绍了如何在项目中安装并配置postcss-pxtorem插件，以实现设计稿中不同设计标准的媒体查询转换，同时结合Vue应用处理内联样式，确保在不同设备上的一致性。

安装 postcss-pxtorem

npm install postcss postcss-pxtorem --save-dev

在根目录新建postcss.config.js，配置 postcss-pxtorem

module.exports = {
   
   
    plugins: {
   
   
        // autoprefixer: {},
        'postcss-pxtorem': {
   
   
            // rootValue: 75, // 设计稿宽度的1/10
            rootValue({
    
     file }) {
   
   
                // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
                // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
                return file.indexOf('vant') !== -1 ? 37.5 :