当前位置: 首页 > news >正文

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",

}

http://www.lryc.cn/news/329009.html

相关文章:

  • android 快速实现 图片获取并裁剪(更换头像)
  • 垃圾回收机制--GC 垃圾收集器--JVM调优-面试题
  • Java基础知识总结(29)
  • vue js金额转中文
  • 《QT实用小工具·二》图片文字转base64编码
  • Django安装及第一个项目
  • 专升本-物联网
  • 二叉树的遍历C语言
  • PostgreSQL到Doris的迁移技巧:实时数据同步新选择!
  • 【三维】关于万向节锁的直白解释
  • 程序员的修养 - 变量
  • 判断一个元素是否在可视区域中
  • 【Monero】Wallet RPC | Wallet CLI | 门罗币命令行查询余额、种子、地址等命令方法教程
  • FPGA----ZCU106的petalinux 2019.1使用USB传输数据
  • 备考ICA----Istio实验10---为单个主机配置TLS Istio Ingress Gateway实验
  • 【4】单链表(有虚拟头节点)
  • html第二次作业
  • Android客户端自动化UI自动化airtest从0到1搭建macos+脚本设计demo演示+全网最全最详细保姆级有步骤有图
  • 基于单片机的自动浇灌系统的设计
  • WebStorm 与 VSCode 对比分析
  • git命令-项目使用
  • python安装删除以及pip的使用
  • 7、鸿蒙学习-共享包概述
  • 亚马逊测评新策略:解决底层环境防关联,提升下单成功率
  • 容器和注解开发
  • 有趣且重要的JS知识合集(21)浏览器内置对象讲解之Dom篇
  • 3.两数相加 - 链表
  • iptables 与 firewalld 防火墙
  • Taskflow:异步任务(Asynchronous Tasking)
  • 学习鸿蒙基础(9)