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 ({ file }) {return file.indexOf('vant') !== -1 ? 37.5 : 75},//因为我们一般的设计稿是750px,但是vant组件库的宽度是350pxpropList: ['*']}}}

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

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

相关文章

如何在阿里云一键部署FlowiseAI

什么是FlowiseAI FlowiseAI 是一个开源的低代码开发工具&#xff0c;专为开发者构建定制的语言学习模型&#xff08;LLM&#xff09;应用而设计。 通过其拖放式界面&#xff0c;用户可以轻松创建和管理AI驱动的交互式应用&#xff0c;如聊天机器人和数据分析工具。 它基于Lang…

c++速成之从string类中获取那些知识

温馨提示&#xff1a;本篇文章依旧是c速成系列的文章&#xff0c;因为从这里开始&#xff0c;内容就已经开始复杂&#xff0c;但博主还是以是什么&#xff0c;怎么用的原则继续给大家讲解知识点&#xff0c;希望大家能够耐心看完&#xff0c;并给博主留个三连&#xff0c;博主先…

Redis-缓存过期淘汰策略

缓存淘汰策略 生产上redis内存设置为多少 设置为最大内存的 3/4 redis 会占用物理机多少内存 默认大小是 0&#xff0c;64 位系统下表示不限制内存大小&#xff0c;32位系统表示 3G 如何设置修改redis内存大小 config get maxmemory 查看修改方式 配置文件 单位是字节 2.…

机器学习【金融风险与风口评估及其应用】

机器学习【金融风险与风口评估及其应用】 一、机器学习在金融风险评估中的应用1.提升评估准确性2.实现自动化和智能化3.增强风险管理能力4.信用评估5.风险模型6.交易策略7.欺诈检测 二、机器学习在金融风口评估中的应用1.识别市场趋势2.评估创新潜力3.优化投资策略4. 自然语言处…

深入Postman- 自动化篇

前言 在前两篇博文《Postman使用 - 基础篇》《玩转Postman:进阶篇》中,我们介绍了 Postman 作为一款专业接口测试工具在接口测试中的主要用法以及它强大的变量、脚本功能,给测试工作人员完成接口的手工测试带来了极大的便利。其实在自动化测试上,Postman 也能进行良好的支…

校车购票微信小程序的设计与实现(lw+演示+源码+运行)

摘 要 由于APP软件在开发以及运营上面所需成本较高&#xff0c;而用户手机需要安装各种APP软件&#xff0c;因此占用用户过多的手机存储空间&#xff0c;导致用户手机运行缓慢&#xff0c;体验度比较差&#xff0c;进而导致用户会卸载非必要的APP&#xff0c;倒逼管理者必须改…

Web前端高级工程师培训:封装自己的库

封装自己的库 课前准备 工具 编辑器 VSCode浏览器 Chorme 前置知识 Js基本知识 课堂主题 一、定义函数返还JQ对象 二、ready方法和原生节点处理 三、选择器器封装 四、封装JQ的eq方法 五、封装JQ的click方法 六、jQ中的链式操作 七、封装JQ的css方法 八、cssHooks扩…

软考《信息系统运行管理员》- 4.1信息系统软件运维概述

4.1信息系统软件运维概述 文章目录 4.1信息系统软件运维概述信息系统软件运维的概念信息系统软件的可维护性及维护类型对软件可维护性的度量可以从以下几个方面进行&#xff1a;软件维护分类&#xff1a; 信息系统软件运维的体系1.**需求驱动**2.**运维流程**3.**运维过程**4.*…

Vue 的 v-show 和 v-if 区别?

一、区别 v-show 和 v-if 是 Vue.js 中两种常用的指令&#xff0c;都可以用于控制元素的显示和隐藏&#xff0c;但它们有本质上的区别: 1)v-show 是通过控制元素的 Css display属性来显示或隐藏元素。无论条件是否为真&#xff0c;元素都会被渲染到 DOM中&#xff0c;只是通过…

斯坦福 CS229 I 机器学习 I 构建大型语言模型 (LLMs)

1. Pretraining -> GPT3 1.1. Task & loss 1.1.1. 训练 LLMs 时的关键点 对于 LLMs 的训练来说&#xff0c;Architecture&#xff08;架构&#xff09;、Training algorithm/loss&#xff08;训练算法/损失函数&#xff09;、Data&#xff08;数据&#xff09;、Evalu…

如何减少 Webpack 的打包体积

前端面试题包括ECMScript,TypeScript,Nodejs,React,Webgl,Webpack,Threejs等还在整理中&#xff0c;在线地址前端面试题&#xff0c;源码地址大家多多支持才有动力给大家分享更多好的面试题。 减少 Webpack 的打包体积是优化 Web 应用性能的重要步骤&#xff0c;尤其是在生产环…

两种方式创建Vue项目

文章目录 引言利用Vue命令创建Vue项目准备工作安装Vue CLI创建Vue项目方法一&#xff1a;使用vue init命令方法二&#xff1a;使用vue create命令启动Vue项目 利用Vite工具创建Vue项目概述利用Vite创建项目启动项目 结语 引言 大家好&#xff0c;今天我将向大家展示如何使用不…

鸿蒙富文本显示

1.使用 RichText 组件&#xff08;ArkTS&#xff09; 背景知识&#xff1a;在 ArkTS&#xff08;一种鸿蒙应用开发语言&#xff09;中&#xff0c;RichText组件提供了更强大的富文本显示功能。它允许设置不同的文本样式&#xff0c;包括字体、颜色、字号等多种属性。 Rich Te…

uniapp 如何引用icon 字体

平时使用阿里巴巴的iconfont字体需要下载字体到本地或通过网址引入字体才能使用&#xff0c;但有些情况可能不允许这么做&#xff0c;例如小程序与平常web开发中引入字体图标的方式不一样&#xff0c;必须先转为base64再引入&#xff0c;以下介绍iconfont字体转base64并引入使用…

【layui】多文件上传组件实现

插件预览效果&#xff1a; 需要引入layui的脚本文件layui.js和样式文件layui.css html代码&#xff1a; <div class"layui-input-block"><div class"layui-upload-list"><table class"layui-table"><colgroup><col…

easyexcel多sheet导出(唯一能用)

1&#xff0c;response流header, contentType等设置跟单sheet一样 2&#xff0c;上代码 Data public class SheetModel<T> { private String sheetName; private Class<T> clazz; private List<T> data; } ExcelWriter writer EasyExcel.write(resp.ge…

vue3中如何更改当前类的文件名称

首先&#xff0c;使用script指定文件名称 <template><div class"person"><h2>姓名&#xff1a;{{ name }}</h2><h2>年龄&#xff1a;{{ age }}</h2><button click"showTel">查看联系方式</button><bu…

VS2017 编译 SQLite3 动态库

首先官方下载源码: Tags sqlite/sqlite (github.com) 1.安装 VS2017 community edition 2.打开VS2017命令行工具 3.安装TCL 开发库,推荐 TCL 9.0 先下载源码: Tcl/Tk 9.0 使用vs2017编译tcl&

【STM32-HAL库】实现微秒、毫秒、纳秒延时。(STM32F4系列)(附带工程下载链接)

使用了本代码后不能使用HAL库自带的HAL_Delay函数 使用了本代码后不能使用HAL库自带的HAL_Delay函数 使用了本代码后不能使用HAL库自带的HAL_Delay函数 一、新建工程 可以参考我的新建工程系列教程 stm32-HAL库cubeMX新建工程教程&#xff08;以F103C8T6为例&#xff09;ht…

基于IDEA+SpringBoot+Vue+Uniapp的投票评选小程序系统的详细设计和实现

2. 详细视频演示 文章底部名片&#xff0c;联系我获取更详细的演示视频 3. 论文参考 4. 项目运行截图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 5. 技术框架 5.1 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框…