基于vue-cli3的vue项目 通过postcss-pxtorem 实现px自动转换成rem并解决版本问题

1、npm安装依赖

npm install lib-flexible --save
npm install postcss-pxtorem --save-dev

2、引入lib-flexible     

在项目入口文件main.js 中引入lib-flexible

import "lib-flexible/flexible.js";

3、 配置postcss-pxtorem

vue-cli3 项目postcss-pxtorem的配置放在vue.config.js中(新构建的项目可能会找不到,需要手动在项目根目录创建vue.config.js)。

module.exports = {css: {loaderOptions: {postcss: {postcssOptions:{  /用于解决版本兼容问题plugins: [// 把px单位换算成rem单位require("postcss-pxtorem")({rootValue: 75, // 换算的基数 (为了便于开发,根据设计图来定这个值,如果设计图给的宽度是750,通常就会把remUnit设置为75,这样就可以按照UI图1:1进行开发)selectorBlackList: [".van"],// 要忽略的选择器并保留为px。propList: ["*"], //可以从px更改为rem的属性。minPixelValue: 2 // 设置要替换的最小像素值。})]}}}}
}

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

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

相关文章

【Vue】在执行事件中含有axios的值实现同步说明(自己用)

两个 async和await 一、父事件代码 async function WxEdit(wxValue,wxShcompany) {let ifDate await SelectWx(wxShcompany);console.log("#############");console.log(ifDate);alert(ifDate); } 二、子事件代码 async function SelectWx(wxShcompany) {let me…

上海亚商投顾:沪指震荡微涨 金融、地产午后大幅走强

上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 市场情绪 三大指数早盘震荡,午后集体拉升反弹,创业板指涨超1%。券商等大金融板块午后再度走强&#…

问题解决方案

前端开发 1、npm安装的时候老是卡住 reify:rxjs: timing reifyNode:node_modules/vue/cli/node_modules 查看当前使用的那个镜像 nrm lsnpm ---------- https://registry.npmjs.org/yarn --------- https://registry.yarnpkg.com/cnpm --------- https://r.cnpmjs.org/taobao …

用docker 部署springboot项目

# 加入java FROM bitnami/java # WORKDIR /usr/local/test/boot-work#镜像内的工作目录 WORKDIR /usr/local/test# ENV workPath /usr/local/test/boot-work# 宿主的当前目录 boot-v1.jarjar 拷贝到 WORKDIR下boot.jar ADD boot-v1.jar boot.jar # 暴露80端口 EXPOSE 80 # 启动…

力扣 343. 整数拆分

题目来源:https://leetcode.cn/problems/integer-break/description/ C题解1:动态规划。dp[i] 代表数字i拆分后得到的最大乘积。递归公式为拆分后两个数的最大乘积相乘,即 dp[i] max(dp[i], dp[j] * dp[i-j])。对于n2或3需要另外讨论。 cla…

Review 2016/3-2023/7

Review 2016/3-2023/7 将对2016年3月至2023年7月的工作和学习内容进行整理,暂定以下模块 一、数据结构与算法 1.阅读《算法导论》未阅读章节,并实现相应数据结构与算法 2.阅读《数据结构基础》,并实现相应数据结构与算法 3.阅读《计算几何…

Scratch 教程:如何实现文本分割

在平时,我们通常会有分割文本的要求,但扩展却又无法使用scratch离线版打开,咋办呢?我们可以用原版做出来! 没关系,我来教你! 我们自定义一个函数,之后要分割调用就行了 创建三个变量…

【bug】记录一次使用Swiper插件时loop属性和slidersPerView属性冲突问题

简言 最近在vue3使用swiper时,突然发现loop属性和slides-per-view属性同时存在启用时,loop生效,下一步只能生效一次的bug,上一步却是好的。非常滴奇怪。 解决过程 分析属性是否使用错误。 loop是循环模式,布尔型。 …

Oracle:merge into用法

文章目录 merge into使用场景merge into语法测试表普通模式 merge使用注意点 merge into MERGE 是 Oracle9i 新增的语法,根据源表对目标表进行匹配查询,匹配成功时更新,不成功时插入 比单独的 update insert 的方式效率要更高,尤…

iptables防火墙

一、防火墙概述 防火墙分两种: 硬件防⽕墙:通过硬件和软件的组合,基于硬件的防⽕墙保护整个内部网络安全。(例如 华为E9000) 软件防⽕墙:通过纯软件,单独使⽤软件系统来完成防⽕墙功能&#x…

我的创作纪念日2023.8.5

机缘 在CSDN的创作开始于去年,创作的初衷是希望对自己的学习经历进行记录,同时也把自己的经验和收获传递给更多需要的小伙伴。创作博客的过程是一个将输入的知识进行再生产的过程,在此期间,知识获得了沉淀和提纯,思路…

8.1 配置环境/Linux进程管理总结/Argument/saveload Module/切片

文章目录 一、配置环境二、Linux 进程管理总结三、ArgumentParser四、Saving and Loading Models nn.ModulesWarmstarting Model Using Parameters from a Different Model五、切片!拓展: 一、配置环境 github配置环境可以直接赋值到txt中,然…

修复 Adob​​e After Effects 预览无法工作/播放的方法技巧

Adobe After Effects 允许您预览视频和音频,而无需将其渲染为最终输出。当您无法在此应用程序中预览视频和音频时,一定会感到沮丧。不过不用担心,您可以尝试以下方法来修复 After Effects 预览不起作用的问题。 技巧1:重启After …

2023年 Java 面试八股文(20w字)

目录 第一章-Java基础篇 1、你是怎样理解OOP面向对象 难度系数:⭐ 2、重载与重写区别 难度系数:⭐ 3、接口与抽象类的区别 难度系数:⭐ 4、深拷贝与浅拷贝的理解 难度系数:⭐ 5、sleep和wait区别 难度系数&a…

各种大数据概念笔记

各种大数据概念 1 数据仓库数据分层定义 1.1 方式1 宽表-topic 事实层-fact 基础整合层 1.2 方式二 ADS:Application Data Service,应用数据层 也可以称为或者发展为DM data marketing,供线上系统使用 CDM:Common Data Model DWD:Data Warehouse Detail,明细数据层。 也…

Mac电脑怎么使用“磁盘工具”修复磁盘

我们可以使用“磁盘工具”的“急救”功能来查找和修复磁盘错误。 “磁盘工具”可以查找和修复与 Mac 磁盘的格式及目录结构有关的错误。使用 Mac 时,错误可能会导致意外行为,而重大错误甚至可能会导致 Mac 彻底无法启动。 继续之前,请确保您…

DP-GAN-判别器代码

将输出的rgb作为输入,输入到判别器中。接着执行一个for循环,看一下body_down列表的组成和x经过body_down之后的值。 body_down是由残差块D组成的列表: 残差块的参数为:(3,128),(128,128),(128,256),(256,256),(256,512),(512,5…

64 # 实现一个 http-server

准备工作 上一节实现了通过 commander 的配置获取到用户的参数,下面完成借用 promise 写成类的方法一节没有完成的任务,实现一个 http-server,https://www.npmjs.com/package/http-server,http-server 是一个简单的零配置命令行静…

价值 1k 嵌入式面试题-计算机网络 OSI

开门见山 请讲下 OSI 各层协议的主要功能? 常见问题 回答不系统回答不确切无法和实际网络协议做关联对应 答题思路 OSI 代表了开放互联系统中信息从一台计算机的一个软件应用流到另一个计算机的另一个软件应用的参考模型 OSI 包含 7 层,每一层负责特…

java中使用Jsoup和Itext实现将html转换为PDF

1.在build.gradle中安装所需依赖: implementation group: com.itextpdf, name: itextpdf, version: 5.5.13 implementation group: com.itextpdf.tool, name: xmlworker, version: 5.5.13 implementation group: org.jsoup, name: jsoup, version: 1.15.32.创建工具…