基于postCSS手写postcss-px-to-vewiport插件实现移动端适配

🌟前言

        目前前端实现移动端适配方案千千万,眼花缭乱各有有缺,但目前来说postcss-px-to-vewiport是一种非常合适的实现方案,postcss-px-to-vewiport是一个基于postCss开发的插件,其原理就是将项目中的px单位转换为vw(视口宽度)。对postCss不了解的朋友可以看看我的上篇文章postCss基本介绍。

🌟实现

        本篇文章是使用vite + vue3 基于postCss来实现postcss-px-to-vewiport插件。

1.创建项目

使用vite创建

npm init vite@latest

使用vue脚手架创建

vue create projectname

选自己喜欢的方式创建就OK

2.简单布局

在公司项目开发中,UI会出设计图,会有一个设计稿的宽度,然后我们根据这个宽度去适配,假设我们现在设计稿的宽度是1280,那么我们写出下面的简单布局:

App.vue文件:

<template><div class="page"><div class="left"></div><div class="right">测试自适应</div></div>
</template><style scoped>
.page{width: 1276px;height: 748px;display: flex;border: 2px red solid;.left{width: 600px;height: 300px;background-color: cadetblue;}.right{width: 300px;height: 300px;margin-left: 200px;background-color: #425e5e;font-size: 20px;;}
}
</style>

 可以看到,当页面宽度是1280时,我们上面写的代码是没有问题的,那这时候我们修改页面大小效果如下:

明显不是我们想要的效果,那么开搞。 

3.编写插件

vite中是自带postCss的,我们不需要额外安装,在vite.config.ts文件中如下:

export default defineConfig({plugins: [vue()],server: {host: '0.0.0.0', //默认情况是不能用ip访问port: 3000},css: {postcss: {plugins: []}}
})

plugins数组中就是填写需要使用的插件。下面我们编辑pxtoVewiport方法:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {Plugin} from 'postcss'const pxtoVewiport = (): Plugin => {return {postcssPlugin:'pxtoVewiport',Declaration(node){const value = node.valueconsole.log('样式值:',value)}}
}
export default defineConfig({plugins: [vue()],server: {host: '0.0.0.0', //默认情况是不能用ip访问port: 3000},css: {postcss: {plugins: [pxtoVewiport()]}}
})

此时可以看到打印的信息:

 

也就是说我们已经拿到项目中的所有样式值,那么接下来我们就是要把所有px单位改成vw。

这里我原本自己写正则实现后,发现还会有margin: 20px 60px;这样的情况,裂开,正则太烧脑,使用程序员必备技能,CV大法,看看postcss-px-to-vewiport源码是怎么实现的,然后就拿到了这个正则:

'"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)'

ok,能用就行,那接下来就是替换过程:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {Plugin} from 'postcss'const getUnitRegexp = (unit: string) => {return new RegExp('"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)' + unit, 'g');
}const pxtoVewiport = (): Plugin => {return {postcssPlugin:'pxtoVewiport',Declaration(node){const value = node.valueif (value.includes('px')) {const pxRegexp = getUnitRegexp('px')node.value = node.value.replace(pxRegexp, (match) => {return match.replace(/(\d*\.?\d+)/g, (m) => {return (parseFloat(m) / 1280 * 100).toFixed(3) + 'vw'})})let reg = new RegExp(/px/,'ig') //在这儿把px删掉node.value = node.value.replace(reg,'')}}}
}export default defineConfig({plugins: [vue()],server: {host: '0.0.0.0', //默认情况是不能用ip访问port: 3000},css: {postcss: {plugins: [pxtoVewiport()]}}
})

 跑起项目:

 

 这时候单位都转换成了vw,在各种大小的屏幕都是我们想看到的效果了。

继续看代码

这里的1280就是我们开发中的设计稿宽度,3是保留的位数。那么继续优化一下,将设计稿宽带和保留位数改为可传参数:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {Plugin} from 'postcss'const getUnitRegexp = (unit: string) => {return new RegExp('"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)' + unit, 'g');
}
const pxtoVewiport = (viewportSize = 375,Places = 2): Plugin => {return {postcssPlugin:'pxtoVewiport',Declaration(node){const value = node.valueif (value.includes('px')) {const pxRegexp = getUnitRegexp('px')node.value = node.value.replace(pxRegexp, (match) => {return match.replace(/(\d*\.?\d+)/g, (m) => {return (parseFloat(m) / viewportSize * 100).toFixed(Places) + 'vw'})})let reg = new RegExp(/px/,'ig') //在这儿把px删掉node.value = node.value.replace(reg,'')}}}
}
export default defineConfig({plugins: [vue()],server: {host: '0.0.0.0', //默认情况是不能用ip访问port: 3000},css: {postcss: {plugins: [pxtoVewiport(1280,3)]}}
})

 到里就完成了一个移动端适配的小插件。

🌟总结

基于postCss还可以做很多事情,postCss就是css界的babel,我们这里也是基本实现了postcss-px-to-vewiport插件的功能。后续还可以继续改进。

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

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

相关文章

CSS 常用样式

1.a 链接,鼠标光标为手指 cursor 属性规定要显示的光标的类型&#xff08;形状&#xff09;。 a {cursor: pointer;/*手指形态,可以指定图片*/ }2. div 文本超出长度&#xff0c;为省略号&#xff0c;悬浮文本上面显示全部文字 <div class"overflow-text">这…

day07 51单片机-18B20温度检测

18B20温度检测 1.1 需求描述 本案例讲解如何从18B20传感器获取温度信息并显示在LCD上。 1.2 硬件设计 1.2.1 硬件原理图 1.2.3 18B20工作原理 可以看到18B20有两根引脚负责供电,一根引脚负责数据交换。18B20就是通过数据线和单片机进行数据交换的。 1)18B20工作时序 2)…

Leetcode-69.x的平方根

题目描述 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 注意&#xff1a;不允许使用任何内置指数函数和算符&#xff0c;例如 pow(x, 0.5) 或者 x ** 0.5 。 示例 …

node.js-模块化

定义&#xff1a;CommonJS模块是为Node.js打包Javascript代码的原始方式。Node.js还支持浏览器和其他Javascript运行时使用的ECMAScript模块标准。 在Node.js中&#xff0c;每个文件都被视为一个单独的模块。 概念&#xff1a;项目是由很多个模块文件组成的 好处&#xff1a…

文件流详细介绍

文件流 使用IO操作文件时&#xff0c;要注意流关闭和释放问题! FileAccess&#xff0c;访问权限(只读&#xff0c;只写&#xff0c;可读可写) 1&#xff09;FileAccess.Read&#xff1a; 用法&#xff1a;获得对文件的读取访问权限&#xff0c;进而可以从文件中读取数据(只读)…

找不到msvcp140dll,无法继续执行代码的详细解决方法

在我们日常使用计算机进行各类工作任务的过程中&#xff0c;时常会遭遇一些突发的技术问题。比如&#xff0c;有时在运行某个重要程序或应用软件时&#xff0c;系统会突然弹出一个令人困扰的错误提示&#xff1a;“电脑提示找不到msvcp140.dll文件&#xff0c;因此无法继续执行…

AI预测福彩3D第9套算法实战化测试第1弹2024年4月22日第1次测试

经过前面多套算法的测试&#xff0c;总结了一些规律&#xff0c;对模型优化了一些参数&#xff0c;比如第8套算法的测试&#xff0c;7码的命中率由最开始的20%提高到了50%。虽然命中率有了很大的提高&#xff0c;但是由于咱们之前的算法只是为了测试和记录&#xff0c;提供的方…

20.Unity飞机大战游戏

1任务&#xff1a;使背景图动起来 2任务&#xff1a;飞机换帧动画 3任务&#xff1a;让飞机发射子弹 4任务&#xff1a;敌机出现 5任务&#xff1a;控制飞机 6任务&#xff1a;游戏碰撞逻辑 7任务&#xff1a;另外两种类型的敌机 8任务&#xff1a;拾取奖励物品换枪 9…

C语言中与内存操作有关的一些函数

前提 最近在使用C语言在开发项目时&#xff0c;要对内存进行操作。刚开始写的时候有一点迷糊&#xff0c;看了一些东西后才发现为什么说指针是C语言的灵魂&#xff0c;因为它可以对内存直接进行操作&#xff0c;多么帅的事情&#xff0c;真的是太帅了。 malloc 声明在头文件…

YOLOv9改进策略 | Conv篇 | 利用 Haar 小波的下采样HWD替换传统下采样(改变YOLO传统的Conv下采样)

一、本文介绍 本文给大家带来的改进机制是Haar 小波的下采样HWD替换传统下采样&#xff08;改变YOLO传统的Conv下采样&#xff09;在小波变换中&#xff0c;Haar小波作为一种基本的小波函数&#xff0c;用于将图像数据分解为多个层次的近似和细节信息&#xff0c;这是一种多分…

Spring AI 教程(一)概述

前言 我在23年11月那会儿关注了Spring AI项目&#xff0c;当时我恰好正热衷于大语言模型的开发&#xff0c;然而当时主流的开发语言只有Python&#xff0c;Java生态中并没有强大的框架供我们使用。 我当时也是靠一些封装OpenAI接口的SDK包来玩ChatGPT的&#xff0c;但是整体的体…

Pytorch 的数据处理 学习笔记

一. 数据集Dataset Dataset是一个抽象类&#xff0c;用于表示数据集。可以创建自定义的Dataset类来加载和准备好的数据&#xff0c;无论数据是存储在何处&#xff08;例如磁盘、内存或其他位置&#xff09;。PyTorch提供了一些内置的Dataset类&#xff0c;例如TensorDataset、…

【Interconnection Networks 互连网络】Flattened Butterfly 扁平蝶形拓扑

Flattened Butterfly 扁平蝶形拓扑 1. 传统蝶形网络 Butterfly Topology2. 扁平蝶形拓扑 Flattened Butterfly3.On-Chip Flattened Butterfly 扁平蝶形拓扑应用于片上网络 Flattened Butterfly 扁平蝶形拓扑 扁平蝶形拓扑是一种经济高效的拓扑&#xff0c;适用于高基数路由器…

Linux:Win10平台上,用VMware安装centos7.x及系统初始化的相关配置

一、安装过程的配置 1、配置分区 2、配置固定的IP地址 二、系统初始化配置 1、关闭防火墙 2、配置NAT网络环境 3、检查网络 4、配置国内yum源 5、卸载自带的JDK 6、安装JDK8

【机器学习】《机器学习建模基础》笔记

文章目录 单元0 前言单元1 数学建模与机器学习学习目标&#xff08;一&#xff09;什么是模型&#xff08;二&#xff09;数学模型的分类&#xff08;三&#xff09;数学建模的一般步骤&#xff08;四&#xff09;机器学习的概念&#xff08;五&#xff09;机器学习的分类&…

数据安全中的存储安全包含哪些内容,如何实现数据存储安全

数据安全中的存储安全主要包括以下几个核心内容&#xff1a; 数据备份与恢复&#xff1a; 定期对重要数据进行备份&#xff0c;确保在发生意外删除、破坏或灾难事件时能够快速恢复数据。使用冗余备份策略&#xff0c;如全备、增量备和差异备份&#xff0c;以及异地备份或云备份…

【C++】友元--最全解析(友元是什么?我们应该如何理解友元?友元可以应用在那些场景?)

目录 一、前言 二、友元是什么&#xff1f; 三、友元的感性理解和分类 &#x1f95d;友元的感性理解 &#x1f34b;友元的三种分类 ✨友元 --- 全局函数 ✨友元 --- 成员函数 ✨友元 --- 类 四、友元函数的应用场景 &#x1f34d;操作符重载 :"<<" 与…

Oracle 可传输表空间(Transportable Tablespace)

在数据归档、备份、测试等场景&#xff0c;我们经常需要将数据从一个系统移动到另一个系统&#xff0c;一个较常用的方案是数据的导出/导入&#xff08;export/import&#xff09;&#xff0c;但是在数据量较大的场景&#xff0c;此方案可能比较耗时。而可传输表空间是一种以文…

在Linux系统中搜索当前路径及其子目录下所有PDF文件中是否包含特定字符串

目录标题 方法一&#xff1a;pdfgrep方法二&#xff1a;使用find和xargs与pdftotext&#xff08;将PDF转换为文本&#xff09;组合&#xff0c;然后用grep搜索 方法一&#xff1a;pdfgrep pdfgrep -ri "rockchip" .方法二&#xff1a;使用find和xargs与pdftotext&am…

消息队列选型(RabbitMq、RocketMq、Kafaka)

文章目录 前言RabbitMq优点缺点 RocketMq优点缺点 Kafaka优点缺点 总结 前言 当引入消息队列时&#xff0c;常见的选择包括ActiveMQ、Kafka、RabbitMQ和RocketMQ。然而&#xff0c;近年来&#xff0c;ActiveMQ的活跃度已经下降&#xff0c;很多公司已经不再使用这款消息队列中…