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

postcss-px-to-viewport include属性

包含include配置的(github):npm i https://github.com/evrone/postcss-px-to-viewport -S

包含include配置的(npm):npm i postcss-px-to-viewport-8-with-include -S

不包含包include配置的(npm):npm i postcss-px-to-viewport

看了一下这篇文章,短期内就获得了很多浏览量,所以再详细说一下
1.第一次我使用的是: npm i postcss-px-to-viewport -S,配置include无效,是因为npm中的该插件内部其实并没有实现include
2.然后我就找到了第二个符合我条件的插件: npm i https://github.com/evrone/postcss-px-to-viewport,但是又发现,我们公司在部署的时候install 该插件的时候下载失败,应该就是链接github失败的问题
3.于是我又从npm中找符合条件的,于是找到了: npm i postcss-px-to-viewport-8-with-include -S,这个依赖虽然看起来每周的安装量很少,但是我安装后实测了一下,是完全没问题的。我的需求:我们平台突然新增了两个大屏界面,我并没有新开一个项目去写,就在后台管理系统新开了两个路由界面去写的,但是我又不想影响其他的界面,所以需要配置include让插件只对两个大屏界面生效
我的配置代码如下:
const loderPx2vw = px2vw({unitToConvert: 'px', // 需要转换的单位,默认为"px"viewportWidth: 1920, // 视窗的宽度,对应pc设计稿的宽度viewportHeight: 1080, // 视窗的高度,对应的是我们设计稿的高度unitPrecision: 2, // 单位转换后保留的精度propList: [// 能转化为vw的属性列表'*',],viewportUnit: 'vw', // 希望使用的视口单位fontViewportUnit: 'vw', // 字体使用的视口单位selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换mediaQuery: false, // 媒体查询里的单位是否需要转换单位replace: true, // 是否直接更换属性值,而不添加备用属性exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件include: [/src\/views\/screenPage\//],
});

相关文章:

postcss-px-to-viewport include属性

包含include配置的(github):npm i https://github.com/evrone/postcss-px-to-viewport -S 包含include配置的(npm):npm i postcss-px-to-viewport-8-with-include -S 不包含包include配置的(npm):npm i postcss-px-to-viewport 看了一下这篇文…...

C++设计模式——抽象工厂模式

文章目录 抽象工厂模式的主要组成部分抽象工厂模式的一个典型例子抽象工厂模式用于其他场景抽象工厂模式与其他设计模式结合使用 C 中的抽象工厂模式是一种创建型设计模式,它主要用于处理对象家族的创建,这些对象之间可能存在一定的关联关系或属于相同的…...

Windows安装VNC连接工具并结合cpolar实现远程内网Ubuntu系统桌面

文章目录 前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 测试…...

Vue3 Hooks函数使用及封装思想

一、什么是Hooks函数? 想象一下,你在做饭,有一些调料你经常会用到,比如盐、酱油和辣椒。每次做饭时,你都会从柜子里拿出这些调料。如果你每次用完都把它们随便放在厨房的某个角落,下次做饭时就可能找不到它…...

YOLOv8改进涨点,添加GSConv+Slim Neck,有效提升目标检测效果,代码改进(超详细)

目录 摘要 主要想法 GSConv GSConv代码实现 slim-neck slim-neck代码实现 yaml文件 完整代码分享 总结 摘要 目标检测是计算机视觉中重要的下游任务。对于车载边缘计算平台来说,巨大的模型很难达到实时检测的要求。而且,由大量深度可分离卷积层构…...

华为s5720s-28p-power-li-ac堆叠配置

叠物理约束: • 连线推荐示意图选用产品子系列中固定的一款设备做示例,与选择产品时指定型号的外观可能不同。示意图主要用于让用户了解相同子系列设备可以用作堆叠的端口的位置,以及使用不同的连线方式时如何连接设备上的端口。因此&#xf…...

c# aes加密解密私钥公钥通钥

using System.Security.Cryptography; using System.Text; namespace EncryptTest { internal class Program { static void Main(string[] args) { Console.WriteLine("Hello, World!"); string 密 EncryptAESBASE64("你…...

上拉电阻与下拉电阻、电容的作用

上拉电阻与下拉电阻 在单片机电路中,上拉电阻和下拉电阻都是常见的电路元件,它们在数字电路设计中扮演着重要的角色。它们的作用如下: 1. **上拉电阻**: - **作用**:当一个引脚没有外部信号时,上拉电阻…...

《Spring Security 简易速速上手小册》第1章 Spring Security 概述(2024 最新版)

文章目录 1.1 Spring Security 的重要性1.1.1 基础知识详解1.1.2 主要案例:用户认证与授权1.1.3 拓展案例 1:OAuth2 社交登录1.1.4 拓展案例 2:JWT 认证 1.2 Spring Security 的核心特性1.2.1 基础知识详解1.2.2 主要案例:基于角色…...

vue页面菜单权限问题解决

带锚点的url,#后面部分后端获取不到. vue的页面是带有#的路由,#后端服务获取不到,只在浏览器端有用. URL 中的哈希符号 (#) 被用来作为网页中的 锚点 使用,锚点的含义就是页面中的某个特定的位置,这个位置可以被快速找到,很类似于在该位置抛…...

C++面试宝典第33题:数组组成最大数

题目 给定一组非负整数nums,重新排列每个数的顺序(每个数不可拆分)使之组成一个最大的整数。注意:输出结果可能非常大,所以你需要返回一个字符串而不是整数。 示例1: 输入:nums = [10, 2] 输出:"210" 示例2: 输入:nums = [3, 30, 34, 5, 9] 输出:"…...

“影像承载初心” 国际数字影像产业园2024首届摄影沙龙诚邀您的参与!

2024年2月29日,树莓集团总部国际数字影像产业园将举行“影像承载初心”2024首届摄影沙龙,活动现场邀请摄影业内大咖与专家共聚成都文创产业园,探讨摄影艺术及影像未来。诚邀您的参与! 国际数字影像产业园介绍: 国际数…...

【C语言】while循环语句

🎈个人主页:豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:C语言 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步&…...

2024数字中国创新大赛·数据要素赛道“能源大数据应用赛”正式上线!参赛指南请查收

近日,由国网福建电力承办的2024数字中国创新大赛能源大数据应用赛正式上线发布。赛事按照数字中国建设、能源革命的战略要求,围绕能源数据要素x、能源数字技术、能源商业模式等热点设置赛题,诚邀社会各界为加快建成新型电力系统出谋划策&…...

react-JSX基本使用

1.目标 能够知道什么是JSX 能够使用JSX创建React元素 能够在JSX中使用JS表达式 能够使用JSX的条件渲染和列表渲染 能够给JSX添加样式 2.目录 JSX的基本使用 JSX中使用JS表达式 JSX的条件渲染 JSX的列表渲染 JSX的样式处理 3.JSX的基本使用 3.1 createElement()的问题 A. …...

学习阶段单片机买esp32还是stm32?

学习阶段单片机买esp32还是stm32? 在开始前我有一些资料,是我根据网友给的问题精心整理了一份「stm32的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!&#xf…...

【Simulink系列】——Simulink子系统子系统封装模块库技术

声明:本系列博客参考有关专业书籍,截图均为自己实操,仅供交流学习! 引入 前面对于简单的动态系统仿真,可以直接建立模型,然后仿真。但是对于复杂的系统,直接建立系统会显得杂乱无章&#xff0…...

一加手机线刷2024版,param预载失败/MSM刷机工具报错

如果之前有刷第三方或者手机出问题,先去下载9008线刷包,可以去去大侠阿木的网站搜索。 这次的主题是param刷机报错,当你确保端口提示有QCOM端口,没有感叹号你需要先卸载设备及其驱动,重新插上手机,在WINDO…...

文件拖放到窗体事件

网上的实现1 实现结果 具体实现代码:注意需要使能允许拖拽 public partial class Form1 : Form {public Form1(){InitializeComponent();this.AllowDrop true; //允许拖拽}private void Form1_DragEnter(object sender, DragEventArgs e){this.Text DateTime.No…...

JAVA集成微信支付V3版JSAPI下单

一、引入微信支付SDK <dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-pay</artifactId> </dependency> 二、支付参数封装 Data ConfigurationProperties(prefix "wx.pay") public class WxP…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...