vue做移动端自适应插件实现rem

1.实现方式

postcss-pxtorem:将px转换为rem

amfe-flexible:为html、body提那家font-size,窗口调整的时候重新设置font-size

2.安装与使用 

npm install amfe-flexible --save

npm install postcss-pxtorem --save-dev

 1.再main.js入口文件引入

// 引入amfe-flexible 根据窗口调整html-font-size大小

import 'amfe-flexible'

2.创建postcss.config.js配置文件

module.exports = {
    plugins: {
        autoprefixer: {},
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 75, //设计稿宽度的1/10
            "mediaQuery": false, // 禁止转换媒体查询中的像素值
            "propList": ["*"] //需要做转化处理的属性,如`hight`、`width`、`margin`、`*`表示全部
        }
    }

}

注意点:
(1)rootValue根据设计稿宽度除以10进行设置,这边假设设计稿为370,即rootValue设为37.5;

(2)propList是设置需要转换的属性,这边*为所有都进行转换。

如果出现报错,降低版本

"dependencies":{

        "amfe-flexible":"^2.2.1",
        "postcss-pxtorem":"^5.1.1",

}

相关推荐

  1. vue移动适应实现rem

    2024-04-01 07:34:05       13 阅读
  2. vue pc网页实现适应

    2024-04-01 07:34:05       34 阅读
  3. vue项目中px单位转rem

    2024-04-01 07:34:05       36 阅读
  4. vue使用postcss-pxtorem实现适应

    2024-04-01 07:34:05       10 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-01 07:34:05       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-01 07:34:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-01 07:34:05       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-01 07:34:05       20 阅读

热门阅读

  1. 洛谷 P2895 [USACO08FEB] Meteor Shower S

    2024-04-01 07:34:05       15 阅读
  2. node.js 常用命令

    2024-04-01 07:34:05       11 阅读
  3. Kimball维度模型之迟到的事实

    2024-04-01 07:34:05       14 阅读
  4. Node.js中的导入导出

    2024-04-01 07:34:05       15 阅读
  5. U8二次开发CO-基于Net8调用COM对象

    2024-04-01 07:34:05       14 阅读
  6. 系统分析师-综合知识-应用数学与经济管理

    2024-04-01 07:34:05       20 阅读
  7. Qt和Boost::asio中的emit冲突

    2024-04-01 07:34:05       17 阅读
  8. Bug积累

    2024-04-01 07:34:05       14 阅读
  9. leetcode350-Intersection of Two Arrays II

    2024-04-01 07:34:05       14 阅读
  10. 天童美语:防患未然 安全同行

    2024-04-01 07:34:05       14 阅读
  11. 3DTiles讲解

    2024-04-01 07:34:05       12 阅读