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

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

  1. 下载插件
npm i postcss-plugin-px2rem --save
  1. 在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)]}}}
  1. 在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图表自适应问题
  1. 在main.js中进行配置
	// main.jsimport { setDomFontSize } from './utils/pxToRem'// 执行方法,相当于全局挂载了setDomFontSize()
希望我的方案对大家会有帮助,如有不足,欢迎评论区指正

相关文章:

px转rem插件postcss-plugin-px2rem使用方法(浏览器缩放页面自适应)

px转rem插件postcss-plugin-px2rem使用方法&#xff08;浏览器缩放页面自适应&#xff09; 1. 常见屏幕自适应的布局 百分比布局rem布局css媒体查询在前端框架设计初期&#xff0c;应优先选择好页面布局方式 2. postcss-plugin-px2rem插件的使用 官网地址&#xff1a;https…...

批量文件重命名技巧:轻松替换删除文件夹名中的字母,实现高效文件管理新境界

在数字化时代&#xff0c;我们每天都会面对大量的文件和文件夹。无论是工作文档、学习资料还是个人收藏&#xff0c;文件命名的规范性都显得尤为重要。然而&#xff0c;手动一个一个去修改文件名&#xff0c;不仅耗时耗力&#xff0c;还容易出错。那么&#xff0c;有没有一种方…...

windows设备/路由设备上ip地址如何查看、使用

在Windows设备上查看本地IP地址&#xff08;IPv4和IPv6&#xff09;&#xff1a; 使用命令提示符&#xff1a; 打开命令提示符&#xff08;在Windows中按Win R&#xff0c;然后输入"cmd"并按Enter&#xff09;。在命令提示符窗口中&#xff0c;输入以下命令以查看…...

服务端⾼并发分布式结构演进之路

在进行技术学习过程中&#xff0c;由于大部分读者没有经历过一些中大型系统的实际经验&#xff0c;导致无法从全局理解一些概念&#xff0c;所以本文以一个"电子商务"应用为例&#xff0c;介绍从一百个到千万级并发情况下服务端的架构的演进过程&#xff0c;同时列举…...

Stable Diffusion ProtoVisionXL大模型之艺术盛宴!

今天基于ProtoVisionXL这款大模型为大家呈现一些视觉上的艺术盛宴,视觉冲击宣传海报信手拈来&#xff0c;再配上你的宣传语&#xff0c;妥妥地让人眼前一亮。 实测参数&#xff1a; 分辨率&#xff1a;768*1024 采样方法 (Sampler)&#xff1a;DPM 2M Karras 迭代步数 (Ste…...

浅谈golang字符编码

1、 Golang 字符编码 Golang 的代码是由 Unicode 字符组成的&#xff0c;并由 Unicode 编码规范中的 UTF-8 编码格式进行编码并存储。 Unicode 是编码字符集&#xff0c;囊括了当今世界使用的全部语言和符号的字符。有三种编码形式&#xff1a;UTF-8&#xff0c;UTF-16&#…...

Vite和Webpack的区别是什么,你站队谁?

Vite和Webpack有很多相同之处&#xff0c;也有区别&#xff0c;很多老铁分不清&#xff0c;贝格前端工场借助此文为大家详细介绍一下。 一、关于Vite和Webpack Vite和Webpack都是前端开发中常用的构建工具&#xff0c;用于将源代码转换为可在浏览器中运行的静态资源。它们在一…...

【微信小程序】事件传参的两种方式

文章目录 1.什么是事件传参2.data-*方式传参3.mark自定义数据 1.什么是事件传参 事件传参:在触发事件时&#xff0c;将一些数据作为参数传递给事件处理函数的过程&#xff0c;就是事件传参 在微信小程序中&#xff0c;我们经常会在组件上添加一些自定义数据&#xff0c;然后在…...

前端针对需要递增的固定数据

这里递增的是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…...

红酒保存中的氧气管理:适度接触与避免过度氧化

在保存云仓酒庄雷盛红酒的过程中&#xff0c;我们不得不面对一个微妙的问题&#xff1a;氧气管理。氧气&#xff0c;这个我们生活中无处不在的气体&#xff0c;对于红酒的保存却有着至关重要的影响。适度接触氧气对红酒的陈年过程和品质维护具有积极作用&#xff0c;然而过度氧…...

从零开始搭建开源智慧城市项目(三)上升线效果

前言 上一节实现了添加建筑物线框&#xff0c;模型外墙和道路地面材质添加。这一节准备通过简单的shader实现上升线效果。 思路 简单的说一下思路&#xff0c;通过获取模型顶点坐标所在的高度Z来进行筛选&#xff0c;高度再某一区间内设置成上升线的颜色&#xff0c;其余高度…...

unity基础(五)地形详解

目录 一 创建地形 二 调整地形大小 三 创建相邻地形 四 创建山峰 五 创建树木 七 添加风 八 添加水 简介: Unity 中的基础地形是构建虚拟场景的重要元素之一。 它提供了一种直观且灵活的方式来创建各种地形地貌&#xff0c;如山脉、平原、山谷等。 通过 Unity 的地形…...

postman接口测试工具详解

Postman 是一个功能强大的 API 开发和测试工具&#xff0c;广泛应用于开发人员和测试人员进行 API 的调试、测试、文档生成等工作。以下是对 Postman 的详细介绍。 1. 功能概览 1.1 请求构建 请求类型: 支持 GET、POST、PUT、DELETE、PATCH、OPTIONS 等多种 HTTP 方法。URL …...

2024年护网行动全国各地面试题汇总(3)作者:————LJS

应急响应基本思路和流程 收集信息&#xff1a;收集客户信息和中毒主机信息&#xff0c;包括样本判断类型&#xff1a;判断是否是安全事件&#xff0c;何种安全事件&#xff0c;勒索、挖矿、断网、DoS 等等抑制范围&#xff1a;隔离使受害⾯不继续扩⼤深入分析&#xff1a;日志分…...

计算机专业的学生要达到什么水平才能进入大厂工作?越早知道越好

计算机专业的学生要达到什么水平才能进入BAT等大厂工作&#xff1f;越早知道越好. 一、算法题 各大公司笔试、面试基本都考这个&#xff0c;别的不说&#xff0c;《剑指Offer》所有题目背下来&#xff0c;Leetcode高频题目刷个一两百遍&#xff0c;搞过ACM也可以&#xff0c;…...

巡检费时费力?试试AI自动巡检

随着企业IT规模不断增长&#xff0c;设备、系统越来越多&#xff0c;运维工作压力也与日俱增。保障设备、系统健康稳定地运行&#xff0c;日常巡检是运维工作不可或缺的部分。通过巡检可以及时发现设备、系统的异常问题&#xff0c;提前预防及时处理&#xff0c;避免问题扩大产…...

46-4 等级保护 - 网络安全等级保护概述

一、网络安全等级保护概述 原文:没有网络安全就没有国家安全 二、网络安全法 - 安全立法 中华人民共和国主席令 第五十三号 《中华人民共和国网络安全法》已于2016年11月7日由中华人民共和国第十二届全国人民代表大会常务委员会第二十四次会议通过,并自2017年6月1日起正式…...

css引入方式有几种?link和@import有什么区别?

在CSS中&#xff0c;引入外部样式表的方式主要有两种&#xff1a;<link>标签和import规则。 使用<link>标签引入外部样式表&#xff1a; <link rel"stylesheet" href"path/to/style.css">这种方式是在HTML文档的<head>部分或者…...

使用‘消除’技术绕过LLM的安全机制,不用训练就可以创建自己的nsfw模型

开源的大模型在理解和遵循指令方面都表现十分出色。但是这些模型都有审查的机制&#xff0c;在获得被认为是有害的输入的时候会拒绝执行指令&#xff0c;例如会返回“As an AI assistant, I cannot help you.”。这个安全功能对于防止误用至关重要&#xff0c;但它限制了模型的…...

解决使用elmessage 没有样式的问题

错误情况 这里使用了一个消息提示&#xff0c;但是没有出现正确的样式&#xff0c; 错误原因和解决方法 出现这种情况是因为&#xff0c;在全局使用了按需导入&#xff0c;而又在局部组件中导入了ElMessage组件&#xff0c;我们只需要将局部组件的import删除就可以了 import…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅!

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅! 🌱 前言:一棵树的浪漫,从数组开始说起 程序员的世界里,数组是最常见的基本结构之一,几乎每种语言、每种算法都少不了它。可你有没有想过,一组看似“线性排列”的有序数组,竟然可以**“长”成一棵平衡的二…...

深入解析光敏传感技术:嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件&#xff0c;其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时&#xff0c;价带电子受激发跃迁至导带&#xff0c;形成电子-空穴对&#xff0c;导致材料电导率显著提升。…...