移动端适配px(postcss+rem)

最新推荐文章于 2025-06-10 10:49:03 发布

原创

最新推荐文章于 2025-06-10 10:49:03 发布 · 置顶 · 339 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #css

本文介绍了如何使用postcss和postcss-pxtorem在移动端进行适配。首先，需要安装postcss和postcss-pxtorem插件。接着，在项目根目录创建postcss.config.js文件并配置转换规则。最后，引入rem.js来完成px到rem的转换。在配置过程中需要注意避免出现配置错误导致的报错。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步安装postcs和postcss-pxtorem

npm i postcss postcss-pxtorem@5.1.1  --save-dev

第二部在项目的根目录下创建postcss.config.js文件，并写入下面的配置

module.exports = {
    plugins: {
      "postcss-pxtorem": {
        rootValue:75,//根字号
        propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      
      },
    },
  };

第三步引入rem.js

(function (doc,  win)  {    
    //获取html标签
    var  docEl  =  doc.documentElement,
                resizeEvt  =  'orientationchange'  in  window  ?  'orientationchange'  :  'resize',
        //根据横竖屏和屏幕尺寸的改变来动态设置html根字号的函数
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 75 * (clientWidth / 750) + 'px';
            document.body.style.fontSize="24px"