CSS自适应分辨率 postcss-pxtorem(适用于 Vite)

前言

此篇是基于 Vite + Vu3 项目的 CSS 自适应分辨率!
如果想知道基于 Webpack + Vue2 可移步 《CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem(适用于 Webpack)》
项目对应的主要插件版本如下:

"vite": "^4.4.5"
"vue": "^3.3.4"
"@vitejs/plugin-vue": "^4.2.3"

CSS 插件

postcss-pxtorem:使用 rem 代替 pxpostcss 插件,它可以自动将 px 转换成 rem,并且对一些特殊情况进行处理。

额外说明:插件 amfe-flexible 不再使用,最近更新是 6 年前…且在 Vite 中会报错,稍后会有替代方案!

安装

最新版 v6.1.0 报错,暂不细查原因… 使用固定版本 v6.0.0 ,此版本功能满足需求…
额外说明:最新版 v6.1.0 ,发布于 2024.01.20(写此篇文章的前5天左右)。而上个版本 v6.0.0 发布于 3 年前

npm i postcss-pxtorem@6.0.0 -D

配置

  1. 文件 index.html配置
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  1. 根目录下配置文件 postcss.config.js。如下仅有部分配置,想了解更多配置可进入此处!

    module.exports = {"plugins": {"postcss-pxtorem": {rootValue: 16, // 16px = 1rem// unitPrecision: 5,propList: ['*'],// selectorBlackList: ['el-',], //// replace: true,// mediaQuery: false,// minPixelValue: 0}}
    }
    
  2. 根目录下新建 utils/rem.js 文件。其实是替代了插件 postcss-pxtorem 的功能。使用 window.onresize 监听窗口变化。

    // 设置 rem 函数
    function setRem() {// 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16const screenWidth = 1920const scale = screenWidth / 16const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth// 得到html的Dom元素const htmlDom = document.getElementsByTagName('html')[0]// 设置根元素字体大小htmlDom.style.fontSize = htmlWidth / scale + 'px'}
    // 初始化
    setRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function() {setRem()
    }
    

    或按高度来,适用于大屏。特别是页面左右两侧有大屏选项卡时。注意差异在第 2、4 行。按照高度

        // 按高度来const screenHeight = 1080const scale = screenHeight / 16const htmlHeight = document.documentElement.clientHeight || document.body.clientHeight// 得到html的Dom元素const htmlDom = document.getElementsByTagName('html')[0]// 设置根元素字体大小htmlDom.style.fontSize = htmlHeight / scale + 'px'
    

    4.main.js 引入

    import '@/utils/rem.js'
    

注意事项

  • 如果 CSS 代码在 css 文件或 <script> 标签内,直接使用单位 px,框架自动转 rem

  • 如果 CSS 代码写在 html 标签上,无法识别和转换,请修改。请尽量使用类名

    <!-- 无法转换 -->
    <span style="width:20px;height:20px;"></span><!-- 可转换 -->
    <span class="top-left"></span>
    
  • 图片修改,且注意 <img> 图片也要设置高宽;

    background: url("/images/bigScreen/biaoti.png");
    // 必须加上 cover
    background-size: cover;
    

如果报错

报错 ReferenceError: module is not defined in ES module scope
在这里插入图片描述
根据上图报错提示,将文件 postcss.config.js 后缀改为 postcss.config.cjs。注意是 .cjs

VSCode 插件推荐

扩展中搜 cssrem,安装即可:

在这里插入图片描述

鼠标放在 px 那行,上右侧就会自动换算成 rem

在这里插入图片描述

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

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

相关文章

纳斯达克VS路透社MIFI大屏直投-大舍传媒

纳斯达克VS路透社MIFI大屏直投-大舍传媒 引言 在数字时代的今天&#xff0c;大屏投放成为一种广泛应用的营销手段和传媒方式。纳斯达克大屏和路透社MIFI大屏作为两个重要的投放平台&#xff0c;为企业和机构提供了广告和宣传的机会。 纳斯达克大屏的魅力 纳斯达克大屏位于纽…

Wpf 使用 Prism 实战开发Day14

备忘录接口增删&#xff08;CURD&#xff09;改查实现 一.添加备忘录控制器&#xff08;MemoController&#xff09; 备忘录控制器&#xff08;MemoController&#xff09;和待办事项控制器 &#xff08;ToDoController&#xff09;功能实现差不多一样。基本套路就是&#xff1…

写点东西《JavaScript 中的递归》

写点东西《JavaScript 中的递归》 您是否曾经发现自己需要在 JavaScript 中循环遍历一个复杂的多维对象&#xff0c;却不知道如何操作&#xff1f; 那么&#xff0c;递归函数到底是什么&#xff1f; 让我们回到我们的树对象。 为什么使用递归&#x1f31f;更多精彩 您是否曾经发…

LabVIEW工业机器人系统

介绍了ABB工业机器人与LabVIEW之间进行数据交互的解决方案。通过使用TCP/IP协议的socket通信&#xff0c;实现了机器人坐标数据的读取&#xff0c;为人机交互提供了一个更便捷、更高效的新思路。 系统主要由ABB工业机器人、基于TCP/IP协议的通信接口和LabVIEW软件组成。工业机…

鸿蒙常用UI效果及一些处理方式总结

前言&#xff1a; DevEco Studio版本&#xff1a;4.0.0.600 详细使用介绍 1、Text的一些常用设置 Text(this.message).fontSize(50)//字体大小.fontColor(Color.White)//字体颜色.fontWeight(FontWeight.Bold)//字体加粗.backgroundColor(Color.Black)//背景颜色.fontStyle(…

[安全警报] Npm木马利用“Oscompatible“包悄然安装AnyDesk

最近&#xff0c;一个名为OsCompatible的恶意包被上传到npm 。该包被发现包含一个针对 Windows 的远程访问木马。 这个名为OsCompatible的软件包于2024年1月9日发布&#xff0c;在被撤下之前共吸引了380次下载。 据了解&#xff0c;OsCompatible包含“几个奇怪的二进制文件”…

Linux本地部署MeterSphere测试平台并实现公网远程访问

文章目录 前言1. 安装MeterSphere2. 本地访问MeterSphere3. 安装 cpolar内网穿透软件4. 配置MeterSphere公网访问地址5. 公网远程访问MeterSphere6. 固定MeterSphere公网地址 前言 MeterSphere 是一站式开源持续测试平台, 涵盖测试跟踪、接口测试、UI 测试和性能测试等功能&am…

重学JavaScript高级(十五): XHR以及Fetch的理解应用

JavaScript XHR、Fetch 服务器端渲染-前后端分离 **服务器端渲染&#xff1a;**将html文件在后端&#xff0c;拼接好&#xff0c;将整个文件全部返回给前端 随着目前业务逻辑的复杂度提升&#xff0c;这种开发模式&#xff0c;会导致效率低下同时&#xff0c;有时候前端页面仅…

SQL语句 - 查询语句

Data Query Language 文章目录 Data Query Language数据查询&#xff08;DQL&#xff09;基础查询1 基本查询2 排序查询3 条件查询4 分支结构查询5 查询函数6 分组查询7 分组过滤查询8 限定查询9 基础查询总结 面试题&#xff1a;一条SQL查询语句的执行流程高级查询1 子查询2 合…

linux基础学习(7):find命令

1.按照文件名搜索 find 搜索路径 选项 文件名 选项&#xff1a; -name&#xff1a;按文件名搜索 -ineme&#xff1a;不区分文件名大小写搜索 -inum&#xff1a;按inode号搜索 按文件名搜索跟按关键词搜索不一样&#xff0c;只能搜到文件名完整对应的文件 *根据文件名…

电磁波的空间辐射的几种传输形式

一般来说&#xff0c;波的传播方式与波长有关&#xff0c;如低频段的地波传播&#xff0c;极低频段的地—电离层波导传播&#xff0c;短波段的天波传播&#xff0c;甚高频&#xff0c;超高频的直线传播和散射传播方式等。绕射和透射是电磁波传输特性与环境的关系&#xff0c;属…

利用 Token Explorer 信号驾驭市场波动

市场波动使加密货币投资组合面临风险&#xff0c;但是通过 Token Explorer 分析&#xff0c;我们可以对波动进行建模&#xff0c;提前预测市场风险&#xff0c;并找到最安全的投资策略。通过综合考虑 Token 价格、交易量、社交媒体信息和链上交易等各种数据&#xff0c;我们可以…

【转载】linux摄像头驱动

Linux摄像头驱动学习第一篇&#xff0c;对虚拟视频驱动Virtual Video Driver(vivid)进行测试、分析、编写。 V4L2(Video for Linux two)是Linux内核中关于视频设备的内核驱动框架&#xff0c;为上层的访问底层的视频设备提供了统一的接口。 V4L2可以支持多种设备,它可以有以下…

【进入游戏行业选游戏特效还是技术美术?】

进入游戏行业选游戏特效还是技术美术&#xff1f; 游戏行业正处于蓬勃发展的黄金时期&#xff0c;科技的进步推动了游戏技术和视觉艺术的飞速革新。在这个创意和技术挑战交织的领域里&#xff0c;游戏特效和技术美术岗位成为了许多人追求的职业目标。 这两个岗位虽然紧密关联…

开始读 Oracle PL/SQL Programming 第6版

最近觉得PL/SQL越来越重要&#xff0c;因为这本书早就在待读列表中&#xff0c;因此决定系统的学一下。 2024年1月24日晚开始读。 在亚马逊上的评价还不错&#xff1a; 本书的第一作者是Steven Feuerstein&#xff0c;是Oracle资深的Developer Advocate。 本书的示例代码可…

如何实现激光雷达运动补偿,这篇就够了

目录 激光雷达为什么会存在运动畸变 激光雷达如何运动去畸变 C++实践激光雷达运动补偿(辅助传感器) 实践激光雷达ICP运动补偿 参考文献 激光雷达为什么会存在运动畸变 首先要理解为什么会产生运动畸变。激光雷达扫描物体形成点云的过程自身伴随着旋转运动,每次激…

城市开发区视频系统建设方案:打造视频基座、加强图像数据治理

一、背景需求 随着城市建设的步伐日益加快&#xff0c;开发区已经成为了我国工业化、城镇化和对外开放的重要载体。自贸区、开发区和产业园的管理工作自然也变得至关重要。在城市经开区的展览展示馆、进出口商品展示交易中心等地&#xff0c;数千路监控摄像头遍布各角落&#…

面试常问的Spring AOP底层原理

AOP底层原理可以划分成四个阶段&#xff1a;创建代理对象阶段、拦截目标对象阶段、调用代理对象阶段、调用目标对象阶段 第一阶段&#xff1a;创建代理对象阶段 通过getBean&#xff08;&#xff09;方法创建Bean实例根据AOP的配置匹配目标类的类名&#xff0c;判断是否满足切…

Termux结合内网穿透实现无公网ip远程SFTP传输文件

目录 前言 1. 安装openSSH 2. 安装cpolar 3. 远程SFTP连接配置 4. 远程SFTP访问 4. 配置固定远程连接地址 结语 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊Termux结合内网穿透实现无公网ip远程SFTP传输文件&#xff0c;希望大家能…

RisingWave 存储引擎优化:更高的性能与更低的成本

1背景 在「Hummock &#xff1a;专为 RisingWave 流处理而设计的云原生存储引擎」一文中里我们已经介绍了 Hummock 的设计理念与基本架构&#xff0c;本文主要介绍 Hummock 近期几个版本的重大改进与优化 2Fast Compaction 在设计之初&#xff0c;Hummock 的数据文件格式参…