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

Vue3 vite使用postcss-px-to-viewport(适配vant)

Vue3 vite使用postcss-px-to-viewport(适配vant)

  • 安装
  • vite.config.js配置

安装

npm install postcss-px-to-viewport-8-plugin -D

vite.config.js配置

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin';// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},css: {postcss: {plugins: [postcsspxtoviewport8plugin({unitToConvert: 'px',viewportWidth: file => file.indexOf('van') > 0 ? 375 : 750,unitPrecision: 5, // 单位转换后保留的精度propList: ['*'], // 能转化为vw的属性列表viewportUnit: 'vw', // 希望使用的视口单位fontViewportUnit: 'vw', // 字体使用的视口单位selectorBlackList: ['ignore-'], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换mediaQuery: true, // 媒体查询里的单位是否需要转换单位replace: true, //  是否直接更换属性值,而不添加备用属性exclude: [], // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件include: [], // 如果设置了include,那将只有匹配到的文件才会被转换landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)landscapeUnit: 'vw', // 横屏时使用的单位landscapeWidth: 1628, // 横屏时使用的视口宽度})]}       }
})

相关文章:

Vue3 vite使用postcss-px-to-viewport(适配vant)

Vue3 vite使用postcss-px-to-viewport(适配vant) 安装vite.config.js配置 安装 npm install postcss-px-to-viewport-8-plugin -Dvite.config.js配置 import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite import vue from …...

MCU复位时GPIO是什么状态?

大家一定遇到过上电或者复位时外部的MOS电路或者芯片使能信号意外开启,至此有经验的工程师就会经常关心一个问题,MCU复位时GPIO是什么状态?什么电路需要外部加上下拉? MCU从上电到启动,实际可分为复位前和复位后、初始…...

领先GPT-4o:Anthropic 推出新一代模型 Claude 3.5 Sonnet|TodayAI

Anthropic,全球领先的人工智能实验室之一,近日发布了其最新的人工智能模型——Claude 3.5 Sonnet。该模型不仅速度更快,成本更低,而且在多个关键任务上的表现超过了其前代模型 Claude 3 Opus。 更强的视觉功能与幽默感 Claude 3…...

使用AES,前端加密,后端解密,spring工具类了

学习python的时候,看到很多会对参数进行加密,于是好奇心驱使下,让我去了解了下AES加密如何在java中实现。 首先 npm install crypto-js 然后在你的方法中,给你们前端源码看看,因为我用的ruoyi框架做的实验&#xff…...

通过Spring-Data-Redis操作Redis

目录 一、搭建环境 &#xff08;1&#xff09;引入依赖 &#xff08;2&#xff09;自定义模板序列器 &#xff08;3&#xff09;编写配置文件 &#xff08;4&#xff09;操作方法 二、测试 一、搭建环境 &#xff08;1&#xff09;引入依赖 <dependencies><dep…...

自动驾驶ADAS

1 ToF摄像头分类 1.1 ToF原理 类似雷达测距&#xff0c;生成3D点云&#xff0c;或者叫3D贴图。ToF相机的分辨率一般在3万像素左右。ToF距离计算公式如图所示。 Figure 1-1 ToF距离计算公式 D&#xff1a;距离 c&#xff1a;光速 PHI&#xff1a;相位差 fmod&#xff1a;调制频率…...

Python+Pytest+Allure+Yaml接口自动化测试框架详解

PythonPytestAllureYaml接口自动化测试框架详解 编撰人&#xff1a;CesareCheung 更新时间&#xff1a;2024.06.20 一、技术栈 PythonPytestAllureYaml 版本要求&#xff1a;Python3.7.0,Pytest7.4.4,Allure2.18.1,PyYaml6.0 二、环境配置 1、安装python3.7&#xff0c;并配置…...

python turtle 001画两只小狗

效果图&#xff1a; 代码&#xff1a; pythonturtle001画两只小狗资源-CSDN文库 # 作者V w1933423import turtle # 导入turtle模块def draw_dogs():turtle.setup(800, 800) # 设置画布大小为800x800p turtle.Pen() # 创建一个画笔对象p.pensize(14) # 设置画笔大小为14p.…...

『亚马逊云科技产品测评』程序员最值得拥有的第一台专属服务器 “亚马逊EC2实例“

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 引言 自2006年8月9日&#xff0c;在搜索引擎大会&#xff08;SES San Jo…...

python 趣味习题_递归函数(炸弹迷宫路径计算)

@[toc] python 学习中,常会遇到一些百思不得其解的难题,但有时“灵光一现”找准方法,难题便会迎刃而解。 本专栏旨在记录本人解决问题的思考方法,及实现过程。有更好方法或对程序执行有疑问的伙伴,可在评论区留言,共同讨论。 题目要求 题目描述:在一串连续的迷宫(房间…...

免费翻译API及使用指南——百度、腾讯

目录 一、百度翻译API 二、腾讯翻译API 一、百度翻译API 百度翻译API接口免费翻译额度&#xff1a;标准版&#xff08;5万字符免费/每月&#xff09;、高级版&#xff08;100万字符免费/每月-需个人认证&#xff0c;基本都能通过&#xff09;、尊享版&#xff08;200万字符免…...

深度测试中的隐藏面消除技术

by STANCH 标签&#xff1a;#计算机图形学 #深度测试 #深度测试 #隐藏面消除 1.概述 根据我们的日常经验&#xff0c;近处的物体会挡住后面的物体&#xff0c;在三维场景中通常通过深度缓冲来实现这样的效果。深度缓冲记录着屏幕对应的每个像素的深度值。模型一开始所在的局部…...

oracle merge的使用

Oracle中的MERGE语句是一个非常强大的工具&#xff0c;它允许用户在一个SQL语句中同时执行INSERT和UPDATE操作。以下是关于Oracle MERGE语句的详细使用说明&#xff1a; 1. 基本语法 MERGE INTO target_table USING source_table ON (merge_condition) WHEN MATCHED THEN …...

《数字图像处理》实验报告四

一、实验任务与要求 对 Fig0403.tif 进行傅里叶变换并显示其频谱图像&#xff1b;fft2(x) 对 Fig0405.tif 图像进行填充和非填充的高斯滤波&#xff0c;并观察其不同&#xff1b;paddedsize&#xff0c;fft2&#xff08;x,m,n&#xff09; 由 sobel 空间滤波算子生成相应的频率…...

算法04 模拟算法之一维数组相关内容详解【C++实现】

大家好&#xff0c;我是bigbigli&#xff0c;模拟算法我们将分为几个章节来讲&#xff0c;今天我们只看一维数组相关的题目 目录 模拟的概念 训练&#xff1a;开关灯 解析 参考代码 训练&#xff1a;数组变化 解析 参考代码 训练&#xff1a;折叠游戏 解析 参考代码 …...

【技术解码】百数SRM:如何助力企业快速优化供应链管理?

SRM应用是企业优化供应链管理的重要工具&#xff0c;它帮助企业全面管理供应商关系&#xff0c;从评估、选择到协同合作和绩效监控&#xff0c;确保供应链的稳定性和效率。 对于企业来说&#xff0c;通过全面管理供应商关系&#xff0c;可以降低采购风险&#xff0c;提升产品质…...

想要用tween实现相机的移动,three.js渲染的canvas画布上相机位置一点没动,如何解决??

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…...

SQL连接与筛选:解析left join on和where的区别及典型案例分析

文章目录 前言数据库在运行时的执行顺序一、left join on和where条件的定义和作用left join on条件where条件 二、left join on和where条件的区别原理不同left join原理&#xff1a;where原理&#xff1a; 应用场景不同执行顺序不同&#xff08;作用阶段不同&#xff09;结果集…...

oliva-bruteforce-luks

olivaeasyLUKS v2破解、bruteforce-luks工具使用、cryptsetup使用、cap_dac_read_searcheip、mysql使用 主机发现 ┌──(kali㉿kali)-[~/桌面/OSCP] └─$ sudo netdiscover -i eth0 -r 192.168.44.148/24服务扫描 ┌──(kali㉿kali)-[~/桌面/OSCP] └─$ sudo nmap -sV -…...

图像超分辨率重建

一、什么是图像超分辨 图像超分辨是一种技术&#xff0c;旨在通过硬件或软件的方法提高原有图像的分辨率。这一过程涉及从一系列低分辨率的图像中获取一幅高分辨率的图像&#xff0c;实现了时间分辨率向空间分辨率的转换。超分辨率重建的核心思想是利用多帧图像序列的时间带宽来…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...