Vue中使px自动转rem配置 (h5适配问题)

以下方法为px自动转换rem,顾名思义,配置完成后,不用再关心rem换算等等,只需按照设计稿的px值写入即可,当你保存后PostCSS插件会自动将px转换成所配置的rem值,并且你在浏览控制台观测界面时你会发现你在代码里写的是px单位,在控制台被转换成了rem单位。

  • postcss 一种对css编译的工具,本身不会对css一顿操作,它通过插件实现功能。
  • 1. 使用amfe-flexible + postcss-pxtorem包实现px自动转换rem

1.首先下载需要的npm包
npm i amfe-flexible
npm install postcss-pxtorem -D
  • 该插件不能转换行内样式中的 px,例如 <div style="width: 200px;"></div>

2 对文件进行额外的配置

  • 首先在mian.js引入amfe-flexible
import 'amfe-flexible'
3.在与src文件夹平级区域创建一个为.postcssrc.js的文件

.postcssrc.js文件进行额外配置
autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件,browsers 用来配置兼容的浏览器版本信息,但是写在这里的话会引起编译器警告。因为 VueCLI 内部已经配置了 autoprefixer 插件。

module.exports = {"plugins": {'postcss-pxtorem': {rootValue: 37.5,propList: ['*']}}}

转载:Vue中使px自动转rem配置(使用第三方包)|| 用js配置+Vscode扩展处理适配问题 - 简书 (jianshu.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/647246.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树莓派无显示屏连接

终端命令控制树莓派关机 1&#xff1a;用网线连接树莓派 按照正常的步骤 &#xff0c;搜索控制面板&#xff0c;网络和internet&#xff0c;网络和共享中心&#xff0c;更改适配器设置&#xff0c;右键WIFI&#xff0c;点击属性&#xff0c;点击共享&#xff0c;打勾允许即可&…

redis排序

文章目录 简介SORT命令的实现ALPHA选项的实现ASC和DESCBYLIMITGET命令 类似映射STORE选项的实现多个命令的执行顺序 简介 Redis的SORT命令可以对列表键、集合键或者有序集合键的值进行排序。 SORT命令的实现 服务器执行SORT numbers 命令的详细步骤如下&#xff1a; 1&#…

超分之ESRGAN

Esrgan&#xff1a;增强型超分辨率生成对抗网络。Esrgan: Enhanced super-resolution generative adversarial networks.In: ECCVW. (2018)Xintao Wang, Ke Yu, Shixiang Wu, Jinjin Gu, Yihao Liu,Chao Dong, Yu Qiao, and Chen Change Loy. 文章目录 摘要一、引言二、相关工作…

科大讯飞 再次引爆Ai

去年「科大讯飞版ChatGPT」星火大模型刚上线的时候&#xff0c;小编给大家推荐过一波&#xff0c;演示了其强大的功能&#xff0c;不少小伙伴都立马申请体验了一把&#xff0c;有小伙伴还私信我说功能非常强大&#xff0c;工作效率提高不少&#xff0c;支持国产大模型之类赞扬。…

西安石油大学C++上机实验汇总

考试题难度就像第三章第五章课后题的难度 基础知识一定要掌握&#xff01;&#xff01;&#xff01; 上机一&#xff1a;类与对象程序设计&#xff08;2 学时&#xff09; 上机目的 掌握声明类的方法。掌握类和类的成员的概念以及定义对象的方法。掌握构造函数和析构函数的…

elementplus 中 DatePicker 日期选择器样式修改无效

问题 遇到一个需求需要修改 DatePicker 日期选择器的样式&#xff0c;在添加了 scoped 属性的 style 标签&#xff0c;并且使用了 deep 样式穿透的情况下并不能修改其样式。 原因 DatePicker 日期选择器弹出面板默认挂载在 body 上&#xff0c;所以在组件中添加了 scoped 属…

Java日期和时间学习记录2

1、Java的LocalDate类当前时间往未来几天和过去时间几天 import java.time.LocalDate;public class Main {public static void main(String[] args) {// 获取当前日期LocalDate currentDate LocalDate.now();System.out.println("当前日期&#xff1a;" currentDa…

【Fooocus 深度学习】SDXL,AIGC生图,源码解读

文章目录 使用通配符增加prompt多样性Fooocus的风格实现 使用通配符增加prompt多样性 prompt和negative_prompt都可以通过apply_wildcards函数来实现通配符替换&#xff0c;apply_wildcards会从txt中随机找一个出来。 promptsunshine, river, trees, __artist__ task_prompt …

vue2、vue3,生命周期详解

一、Vue2.x Vue2的生命周期 是指Vue实例从创建到销毁的整个过程中&#xff0c;会经历一系列的阶段和回调函数。它分为8个阶段&#xff0c;包括了组件的创建、挂载、更新和销毁等过程。 1、beforeCreate: 在实例初始化之后&#xff0c;但在数据观测和事件配置之前被调用。此…

使用ffmpeg转换索尼老DV拍摄的VOB文件为mp4

一些背景故事 最近对象想用 CCD 拍照录像&#xff0c;家里刚好有一台快 20 年前的索尼 DV DCR-DVD653E&#xff0c;就是电池老化充不进去电了。 翻出来之后还感慨了一下&#xff1a;当年没有网购&#xff0c;价格不透明&#xff1b;有些地方也没有官方店&#xff0c;只有一两家…

Linux笔记之bash脚本中的-e、和

Linux笔记之bash脚本中的-e、&和&& code review! 文章目录 Linux笔记之bash脚本中的-e、&和&&1.&和&&2.-e 1.&和&& 在Linux bash脚本中&#xff0c;&符号有几个不同的用途&#xff0c;这里列举了一些常见的情况&#xf…

js中的内置对象、数学对象、日期对象、数组对象、字符串对象

js中的对象&#xff08;三种&#xff09;&#xff1a; 自定义对象 car、computer DOM对象 div、p BOM对象 window、console 内置对象 数学对象 Math &#xff08;object类型&#xff09; 1、圆周率 Math.PI 2、向下取整(返回值) Math.floor() 3、向上取整(返回值) M…

年少不知 Base 好,错把总包当成宝。。

今天聊一个很现实的话题&#xff1a;选 offer 对比薪资时&#xff0c;我强烈建议以 Base 为主&#xff0c;而不是总包。 为什么&#xff1f;且听鱼皮娓娓道来。 注意&#xff0c;以下为个人观点&#xff0c;仅供参考&#xff01; 首先明确 Base 和总包的概念&#xff1a; Base&…

某马头条——day11+day12

实时计算和定时计算 流式计算 kafkaStream 入门案例 导入依赖 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-streams</artifactId><exclusions><exclusion><artifactId>connect-json</artifactId&…

美,英,法,德、意大利和西班牙的geojson,以及区域json

美&#xff0c;英&#xff0c;法&#xff0c;德、意大利和西班牙的geojson文件 json地址 https://pan.baidu.com/s/1nio1bV_j-jAEVqgEHXWsNw?pwdqwer#list/path/GEOJSON 感谢大佬提供的 大佬连接 大佬的知乎原地址 国内geojson获取工具地址 http://da![在这里插入图片描述](h…

367.有效的完全平方数(力扣LeetCode)

367.有效的完全平方数 题目描述 给你一个正整数 num 。如果 num 是一个完全平方数&#xff0c;则返回 true &#xff0c;否则返回 false 。 完全平方数 是一个可以写成某个整数的平方的整数。换句话说&#xff0c;它可以写成某个整数和自身的乘积。 不能使用任何内置的库函…

【江科大】STM32:I2C通信外设(硬件)

在将2C通信外设之前&#xff0c;我们先捋一捋&#xff0c;串口的相关特点来和I2C进行一个对北比。 首先&#xff1a; 1,大部分单片机&#xff0c;设计的PCB板均带有串口通信的引脚&#xff08;也就是通信基本都借助硬件收发器来实现&#xff09; 2.对于串口的异步时序&#xff…

后端系统缓存技术分析

缓存有很多种&#xff0c;如CPU 缓存、磁盘缓存、浏览器缓存等&#xff1b;本文主要针对后端系统的缓存&#xff0c;也就是将程序或系统经常要使用的对象存在内存中&#xff0c;以便在使用时可以快速调用&#xff0c;避免加载数据或者创建重复的实例&#xff0c;以达到减少系统…

韩国访问学者申请注意事项

随着国际交流的增加&#xff0c;韩国成为许多学者追求学术深造的热门目的地之一。如果你计划成为一名韩国访问学者&#xff0c;以下是知识人网小编整理的一些需要注意的事项&#xff0c;以确保你的申请顺利进行。 1.详细了解目标学府&#xff1a;在开始申请之前&#xff0c;仔细…

Python进阶——文件及IO操作

一、文件的基本操作 创建文件对象和打开文件对象&#xff1a;open() def my_write():#(1)打开&#xff08;创建&#xff09;文件fileopen(Myqq.txt,w,encodingutf-8) #如果文件不存在&#xff0c;则在当前目录下创建一个文件名字为Myqq.txt#&#xff08;2&#xff09;操作文件f…