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()
希望我的方案对大家会有帮助,如有不足,欢迎评论区指正

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

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

相关文章

程序员应该具备什么职业素养?

程序员应该有什么职业素养&#xff1f; 作为一个程序员&#xff0c;拥有以下职业素养是非常重要的&#xff1a; 扎实的技术功底&#xff1a;作为程序员&#xff0c;首先要具备扎实的技术基础&#xff0c;包括编程语言、算法、数据结构等方面的知识&#xff0c;能够熟练地解决问…

WebForms Hashtable

WebForms Hashtable 概述 在Web开发领域,尤其是使用ASP.NET WebForms框架时,Hashtable是一个经常被用到的数据结构。Hashtable是.NET Framework中的一个集合类,它提供了键值对的存储方式,其中每个键都是唯一的,键用于快速访问其对应的值。本文将详细介绍Hashtable在ASP.…

利用CompletableFuture优化Java中的异步编程

在现代应用开发中&#xff0c;异步编程是提高应用性能和用户体验的关键技术之一。Java从1.8版本开始引入了CompletableFuture&#xff0c;它为编写非阻塞的异步代码提供了强大的工具。本文将详细介绍CompletableFuture的使用方法&#xff0c;并通过具体代码示例来展示如何在实际…

不想搭集群,直接用spark

为了完成布置的作业&#xff0c;需要用到spark的本地模式&#xff0c;根本用不到集群&#xff0c;就不想搭建虚拟机&#xff0c;hadoop集群啥的&#xff0c;很繁琐&#xff0c;最后写作业还用不到集群&#xff08;感觉搭建集群对于我完成作业来说没有什么意义&#xff09;&…

Cisco Packet Tracer实验(二)

二、用交换机构建 LAN 构建物件如下&#xff1a; 四个PC 两个交换机 一个Multi Switch多功能拓展控制器 连线必须是这个直线&#xff01;&#xff01;&#xff01;不是虚线 最后实现效果如下&#xff1a; 全部的线是绿的&#xff0c;就表示是通的。 尝试一下&#xff0c;看PC…

SolidWorks对设计电脑硬件配置要求是怎么样的

SolidWorks&#xff0c;作为达索系统&#xff08;Dassault Systemes&#xff09;旗下的子公司&#xff0c;一直以其出色的机械设计软件解决方案而著称。它是基于Parasolid内核开发&#xff0c;是单核三维设计软件&#xff0c;面上使用比较多的版本有SolidWorks2022、SolidWorks…

Golang | Leetcode Golang题解之第149题直线上最多的点数

题目&#xff1a; 题解&#xff1a; func maxPoints(points [][]int) (ans int) {n : len(points)if n < 2 {return n}for i, p : range points {if ans > n-i || ans > n/2 {break}cnt : map[int]int{}for _, q : range points[i1:] {x, y : p[0]-q[0], p[1]-q[1]if…

解决vue项目路径用@报错问题,,

vue项目中不同文件src有的可以用来加载图片, 有的文件只能用相对路径../ , 很奇怪 一般vue项目框架下载下来,默认路径可以用 ,来替代相对路径 解决方法 清理缓存&#xff1a;删除node_modules目录下的.cache文件夹&#xff0c;或者使用IDE的清理缓存功能。 亲测有效 资料…

4. 案例研究-接口程序

4. 案例研究-接口程序 本章通过一个案例研究, 来展示设计互相配合的函数的过程.4.1 turtle 模块 创建一个文件mypolygon.py, 并输入如下代码:import turtle bob turtle.Turtle() print(bob)# 这一句的作用是让画板停留, 等手动点击x关闭画板, 程序才结束. # 否则程序执行完毕…

通用大模型与垂直大模型的博弈

在人工智能的蓬勃发展中&#xff0c;大模型正成为焦点&#xff0c;尤其是在通用大模型和垂直大模型之间的竞争中。通用大模型具有更广泛的应用场景&#xff0c;而垂直大模型则在特定领域中展现出更高的可能性和更快的普及速度。虽然目前谁能形成绝对优势尚无定论&#xff0c;但…

8.12 面要素符号化综述

文章目录 前言面要素介绍总结 前言 本章介绍如何使用矢量面要素符号化说明&#xff1a;文章中的示例代码均来自开源项目qgis_cpp_api_apps 面要素介绍 地理空间的要素分为点、线和面&#xff0c;对应的符号也分三类&#xff1a;Marker Symbol、Line Symbol和Fill Symbol&…

c#中上传超过30mb的文件,接口一直报404,小于30mb的却可以上传成功

在一次前端实现上传视频文件时,超过30mb的文件上传,访问接口一直报404,但是在Swagger中直接访问接口确是正常的,且在后端控制器中添加了限制特性,如下 但是却仍然报404,在apifox中请求接口也是报404, 网上说: 在ASP.NET Core中,配置请求过来的文件上传的大小限制通常…

【Android面试八股文】为什么Android中要设计为只能在UI线程中去更新UI?Android中子线程真的不能更新UI吗?如何在子线程中更新UI?

文章目录 一、Android为什么不能在子线程更新UI?二、为什么Android中要设计为只能在UI线程中去更新UI?三、如果不在UI线程中更新UI,可能会出现什么问题呢?四、ViewRootImp是在onActivityCreated方法后面创建的吗?五、为什么一开始在Activity的onCreate方法中创建一个子线程…

生命在于学习——Python人工智能原理(3.4)

三、深度学习 7、过拟合与欠拟合 过拟合和欠拟合是所有机器学习算法都要考虑的问题。 &#xff08;1&#xff09;基本定义 a、欠拟合 欠拟合是指机器学习模型无法完全捕获数据集中的复杂模式&#xff0c;导致模型在新数据上的表现不佳&#xff0c;这通常是由于模型过于简单…

C++进阶,一文带你彻底搞懂左右值引用以及移动语义和完美转发!

目录 一、左值引用1.左值2.左值引用3.左值引用的用途&#xff08;1&#xff09;修改实参&#xff08;2&#xff09;减少拷贝&#xff08;3&#xff09;使用左值引用可以在外部修改对象内的成员变量的值 二、右值引用1.右值&#xff08;1&#xff09;纯右值&#xff08;2&#x…

一文解答 | 代码签名证书怎么选

在当代软件开发中&#xff0c;代码签名证书对于确保软件的完整性、安全性及其可信度至关重要。它通过数字签名验证代码的来源和未被篡改的状态&#xff0c;向最终用户确保软件的可靠性。选择合适的代码签名证书既有利于保护软件开发商的声誉&#xff0c;也有助于建立用户对软件…

虚拟化 之三 详解 jailhouse(ARM 平台)的构建过程、配置及使用

嵌入式平台下,由于资源的限制,通常不具备通用性的 Linux 发行版,各大主流厂商都会提供自己的 Linux 发行版。这个发行版通常是基于某个 Linux 发行版构建系统来构建的,而不是全部手动构建,目前主流的 Linux 发行版构建系统是 Linux 基金会开发的 Yocto 构建系统。 基本环…

ChatGPT:自然语言处理的新纪元与OpenAI的深度融合

随着人工智能技术的蓬勃发展&#xff0c;自然语言处理&#xff08;NLP&#xff09;领域取得了显著的进步。OpenAI作为这一领域的领军者&#xff0c;以其卓越的技术实力和创新能力&#xff0c;不断推动着NLP领域向前发展。其中ChatGPT作为OpenAI的重要成果更是在全球范围内引起了…

go interface

package mainimport "fmt"// 接口 interface func main() {c : Chinese{} //创建一个中国人实例u : American{} //创建一个美国人实例greet(c) //中国人打招呼greet(u) //美国人打招呼 }// 接收具备SayHello接口能力的变量 func greet(s SayHello) {…

Vertical Layout 、Horizontal Layout 实验窗体自适应布局

实验目的 学习实验使用布局实现如下自适应界面 窗体邮件&#xff0c;布局设置为垂直布局 用同样的方法&#xff0c;添加groupbox&#xff0c;并右键设置为水平布局 拖入一个Horizontal Layout&#xff0c;然后拖入button&#xff0c;拖入 Horizontal Spacer 遇到一个问题&#…