px转rem插件postcss-plugin-px2rem使用方法(浏览器缩放页面自适应)
px转rem插件postcss-plugin-px2rem使用方法(浏览器缩放页面自适应)
1. 常见屏幕自适应的布局
- 百分比布局
- rem布局
- css媒体查询
- 在前端框架设计初期,应优先选择好页面布局方式
2. postcss-plugin-px2rem插件的使用
官网地址:https://www.npmjs.com/package/postcss-plugin-px2rem
- 下载插件
npm i postcss-plugin-px2rem --save
- 在vite.config.js
import px2rem from 'postcss-plugin-px2rem';// 插件的参数设置const px2remOptions = {rootValue: 16, //换算基数, 默认100 ,根元素字体的大小unitPrecision: 5, //允许REM单位增长到的十进制数字,其实就是精度控制// propWhiteList: [], // 白名单// propBlackList: [], // 黑名单exclude:false, //默认false,排除某些文件夹的方法,例如/(node_module)/ 。// selectorBlackList: [], //要忽略并保留为 px 的选择器。可以是字符串或者正则表达式// ignoreIdentifier: false, //(boolean/string)一种忽略单个属性的方法,当启用 ignoreIdentifier 时,replace将自动设置为true。// replace: true, // (布尔值)替换包含 rems 的规则,而不是添加后备规则。mediaQuery: false, //(布尔值)允许在媒体查询中转换pxminPixelValue: 0 // 设置要替换的最小像素值。 默认 0}export default defineConfig({plugins:[...],css:{postcss:{plugins:[px2rem(px2remOptions)]}}})
- 在util文件夹中创建pxToRem.js文件
注意:我看其他文章上有做了性能优化,加入了缩放监听防抖。加了防抖,缩放时,会出现那种类似于卡顿的效果,但是性能上确实有优化。(算是牺牲视觉效果增加性能,加不加防抖不妨都试试,看产品需求,因人而异)
// pxToRem.jsimport _ from 'lodash'// 以1920px 底图为准开发页面,动态修改根元素字体的大小export const setDomFontSize = () => {let width = document.documentElement.clientWidth || document.body.clientWidth;let fontsize = (width <= 200 ? 1200 : width) / 100 + 'px';(document.getElementsByTagName('html')[0].style)['font-size'] = fontsize;}// let setDomFontSizeDebounce = _.debounce(setDomFontSize, 400)// window.addEventListener('resize', setDomFontSizeDebounce); // 浏览器加入收缩监听防抖,重新计算rem配置window.addEventListener('resize', setDomFontSize); // 这里有个知识点: window.onresize,window.addEventLister两种方式的区别// 最主要的区别:onresize本身就是一个回调,多次执行会被覆盖,通过addEventLister监听多次执行就不会被覆盖,运用于循环生成多个Echarts时,改变窗口大小,Echarts图表自适应问题
- 在main.js中进行配置
// main.jsimport { setDomFontSize } from './utils/pxToRem'// 执行方法,相当于全局挂载了setDomFontSize()
希望我的方案对大家会有帮助,如有不足,欢迎评论区指正
相关文章:
px转rem插件postcss-plugin-px2rem使用方法(浏览器缩放页面自适应)
px转rem插件postcss-plugin-px2rem使用方法(浏览器缩放页面自适应) 1. 常见屏幕自适应的布局 百分比布局rem布局css媒体查询在前端框架设计初期,应优先选择好页面布局方式 2. postcss-plugin-px2rem插件的使用 官网地址:https…...
批量文件重命名技巧:轻松替换删除文件夹名中的字母,实现高效文件管理新境界
在数字化时代,我们每天都会面对大量的文件和文件夹。无论是工作文档、学习资料还是个人收藏,文件命名的规范性都显得尤为重要。然而,手动一个一个去修改文件名,不仅耗时耗力,还容易出错。那么,有没有一种方…...
windows设备/路由设备上ip地址如何查看、使用
在Windows设备上查看本地IP地址(IPv4和IPv6): 使用命令提示符: 打开命令提示符(在Windows中按Win R,然后输入"cmd"并按Enter)。在命令提示符窗口中,输入以下命令以查看…...
服务端⾼并发分布式结构演进之路
在进行技术学习过程中,由于大部分读者没有经历过一些中大型系统的实际经验,导致无法从全局理解一些概念,所以本文以一个"电子商务"应用为例,介绍从一百个到千万级并发情况下服务端的架构的演进过程,同时列举…...
Stable Diffusion ProtoVisionXL大模型之艺术盛宴!
今天基于ProtoVisionXL这款大模型为大家呈现一些视觉上的艺术盛宴,视觉冲击宣传海报信手拈来,再配上你的宣传语,妥妥地让人眼前一亮。 实测参数: 分辨率:768*1024 采样方法 (Sampler):DPM 2M Karras 迭代步数 (Ste…...
浅谈golang字符编码
1、 Golang 字符编码 Golang 的代码是由 Unicode 字符组成的,并由 Unicode 编码规范中的 UTF-8 编码格式进行编码并存储。 Unicode 是编码字符集,囊括了当今世界使用的全部语言和符号的字符。有三种编码形式:UTF-8,UTF-16&#…...
Vite和Webpack的区别是什么,你站队谁?
Vite和Webpack有很多相同之处,也有区别,很多老铁分不清,贝格前端工场借助此文为大家详细介绍一下。 一、关于Vite和Webpack Vite和Webpack都是前端开发中常用的构建工具,用于将源代码转换为可在浏览器中运行的静态资源。它们在一…...
【微信小程序】事件传参的两种方式
文章目录 1.什么是事件传参2.data-*方式传参3.mark自定义数据 1.什么是事件传参 事件传参:在触发事件时,将一些数据作为参数传递给事件处理函数的过程,就是事件传参 在微信小程序中,我们经常会在组件上添加一些自定义数据,然后在…...
前端针对需要递增的固定数据
这里递增的是1到12 data(){return{cycleOptions:Array.from({ length: 12 }, (v, k) > ({value: k 1,label: String(k 1)})),} }<el-select v-model"ruleForm.monthLength" placeholder"请选择周期数量"><el-optionv-for"item in cycle…...
红酒保存中的氧气管理:适度接触与避免过度氧化
在保存云仓酒庄雷盛红酒的过程中,我们不得不面对一个微妙的问题:氧气管理。氧气,这个我们生活中无处不在的气体,对于红酒的保存却有着至关重要的影响。适度接触氧气对红酒的陈年过程和品质维护具有积极作用,然而过度氧…...
从零开始搭建开源智慧城市项目(三)上升线效果
前言 上一节实现了添加建筑物线框,模型外墙和道路地面材质添加。这一节准备通过简单的shader实现上升线效果。 思路 简单的说一下思路,通过获取模型顶点坐标所在的高度Z来进行筛选,高度再某一区间内设置成上升线的颜色,其余高度…...
unity基础(五)地形详解
目录 一 创建地形 二 调整地形大小 三 创建相邻地形 四 创建山峰 五 创建树木 七 添加风 八 添加水 简介: Unity 中的基础地形是构建虚拟场景的重要元素之一。 它提供了一种直观且灵活的方式来创建各种地形地貌,如山脉、平原、山谷等。 通过 Unity 的地形…...
postman接口测试工具详解
Postman 是一个功能强大的 API 开发和测试工具,广泛应用于开发人员和测试人员进行 API 的调试、测试、文档生成等工作。以下是对 Postman 的详细介绍。 1. 功能概览 1.1 请求构建 请求类型: 支持 GET、POST、PUT、DELETE、PATCH、OPTIONS 等多种 HTTP 方法。URL …...
2024年护网行动全国各地面试题汇总(3)作者:————LJS
应急响应基本思路和流程 收集信息:收集客户信息和中毒主机信息,包括样本判断类型:判断是否是安全事件,何种安全事件,勒索、挖矿、断网、DoS 等等抑制范围:隔离使受害⾯不继续扩⼤深入分析:日志分…...
计算机专业的学生要达到什么水平才能进入大厂工作?越早知道越好
计算机专业的学生要达到什么水平才能进入BAT等大厂工作?越早知道越好. 一、算法题 各大公司笔试、面试基本都考这个,别的不说,《剑指Offer》所有题目背下来,Leetcode高频题目刷个一两百遍,搞过ACM也可以,…...
巡检费时费力?试试AI自动巡检
随着企业IT规模不断增长,设备、系统越来越多,运维工作压力也与日俱增。保障设备、系统健康稳定地运行,日常巡检是运维工作不可或缺的部分。通过巡检可以及时发现设备、系统的异常问题,提前预防及时处理,避免问题扩大产…...
46-4 等级保护 - 网络安全等级保护概述
一、网络安全等级保护概述 原文:没有网络安全就没有国家安全 二、网络安全法 - 安全立法 中华人民共和国主席令 第五十三号 《中华人民共和国网络安全法》已于2016年11月7日由中华人民共和国第十二届全国人民代表大会常务委员会第二十四次会议通过,并自2017年6月1日起正式…...
css引入方式有几种?link和@import有什么区别?
在CSS中,引入外部样式表的方式主要有两种:<link>标签和import规则。 使用<link>标签引入外部样式表: <link rel"stylesheet" href"path/to/style.css">这种方式是在HTML文档的<head>部分或者…...
使用‘消除’技术绕过LLM的安全机制,不用训练就可以创建自己的nsfw模型
开源的大模型在理解和遵循指令方面都表现十分出色。但是这些模型都有审查的机制,在获得被认为是有害的输入的时候会拒绝执行指令,例如会返回“As an AI assistant, I cannot help you.”。这个安全功能对于防止误用至关重要,但它限制了模型的…...
解决使用elmessage 没有样式的问题
错误情况 这里使用了一个消息提示,但是没有出现正确的样式, 错误原因和解决方法 出现这种情况是因为,在全局使用了按需导入,而又在局部组件中导入了ElMessage组件,我们只需要将局部组件的import删除就可以了 import…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型(Vision-Language Models, VLMs),为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展,机器人仍难以胜任复杂的长时程任务(如家具装配),主要受限于人…...
热烈祝贺埃文科技正式加入可信数据空间发展联盟
2025年4月29日,在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上,可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞,强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...
