【postcss-px-to-viewport】屏幕适配

news/2024/5/25 15:04:47

背景

有的时候我们本地开发的时候使用的px为单位,但是我们想要使用vw单位,这样可以在不同的屏幕下自动伸缩元素的大小进而达到自适应

解决方案

使用postcss-px-to-viewport第三方插件。
原理:它主要用于将 CSS 文件中的 px 单位转换为 vw/vh 单位,以便实现响应式布局。然而,这个插件只作用于 CSS 文件中的样式,而不会影响 HTML 文件中的行内样式或通过 JavaScript 动态添加的样式。

  • 行内样式,我们可以搞个自定义指令v-px-to-vw
  • JS动态添加的样式,通过公共函数pxToVw手动转换

效果

实现步骤

  1. 安装postcss-px-to-viewport为开发依赖
  npm  i -D postcss-px-to-viewport
  1. 在项目目录下新建 postcss.config.js,并设置当前开发视口的大小
module.exports = {plugins: {'postcss-px-to-viewport': {viewportWidth: 1920,},},
};
  1. 封装公共函数'utls/pxToVw.js'
import postcss from '../../postcss.config'export default function pxToVw(size) {return 100 * size / postcss.plugins['postcss-px-to-viewport'].viewportWidth + 'vw'
} 
  1. 在主入口main.js注册v-px-to-vw指令
Vue.directive('px-to-vw', {inserted(element) {// 获取元素的行内样式const style = element.style.cssText;// 正则表达式匹配 px 单位const newStyle = style.replace(/(\d+)px/g, (match, p1) => pxToVw(Number(p1)));// 设置转换后的样式element.style.cssText = newStyle;})
  1. 在html和js中使用,比如:App.vue
<template><div class="app" ref="appRef"><div class="demo" style="width: 200px; height: 100px" v-px-to-vw>测试1:行内样式</div></div>
</template><script>
import pxToVw from './utils/pxToVw'
export default {data() {return {}},mounted() {const app_el = this.$refs.appRefconst test = document.createElement('div')test.className = 'test'// test.style.width = '300px'// test.style.height = '200px'test.style.width = pxToVw(300)test.style.height = pxToVw(200)test.style.backgroundColor = 'pink'test.textContent = '测试2:JS代码中'app_el.append(test)},
}
</script><style lang="less" scoped>
.app {padding: 50px;
}
.demo {// width: 200px;// height: 300px;background: orange;
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

docker 构建自己的镜像

docker镜像仓库的镜像,很多时候不能满足我们的使用。比如,需要一个安装了redis、swoole、mongodb、pdo扩展的php7.4版本的扩展,从哪里获取呢?这时候,就能用到今天这篇文档了。 docker 可以通过Dockerfile文件,来构建自己的专属镜像。那么,究竟怎么操作呢?# 基础镜像选择…

墨刀原型设计工具分析

一、墨刀工具简介 墨刀是一款在线原型设计与协同工具,它允许产品经理、设计师、开发、销售、运营及创业者等用户群体构建产品原型,演示项目效果,并进行团队协作。墨刀的设计理念是为用户提供一个简单易用的工具,以便快速上手并开始原型设计。二、墨刀的主要特点 1易于上手:…

5.9-15护网常考漏洞

1、中间件漏洞态势感知(SA):situation awareness 2、常见软件服务漏洞 shiro550和721漏洞区别; java框架,4a认证,认证授权会话加密。 登录后有个remember me选项,记住会话,验证时先看remember me 选项是否勾选 ;若勾选,将用户身份序列化,再AES加密,之后base64编码…

矩阵位移法大作业监工日记

5/15 新建文件夹,先做好前期结构数据化的手写性梳理,写一点变量的定义,感觉有很多重复的信息,但是懒得精简了。 编写输入文件in.txt,和直接用const差不多,感觉不如直接程序内打表,因为后面结构数据化的时候还是直接存的信息,泛用化水平进一步降低。1 /* 矩阵位移法大作…

原创-CommonsCollections1-DefaultMap链

今天我打算整点儿不一样的内容,通过之前学习的TransformerMap和LazyMap链,想搞点不一样的,所以我关注了另外一条链DefaultedMap链,主要调用链为: 调用链详细描述:ObjectInputStream.readObject()DefaultedMap.readObject()DefaultedMap.get()ChainedTransformer.transfor…

Idefics2 简介: 为社区而生的强大 8B 视觉语言模型

我们很高兴在此发布 Idefics2,这是一个通用的多模态模型,接受任意文本序列和图像序列作为输入,并据此生成文本。它可用于回答图像相关的问题、描述视觉内容、基于多幅图像创作故事、从文档中提取信息以及执行基本的算术运算。 Idefics2 由 Idefics1 改进而得,其参数量为 8B…

文件处理命令

目录1.sort命令--对行内容进行升序排序2.uniq命令--对连续的重复行进行去重3.tr命令--对输入的内容进行替换(1)删除空行(2) Windows的另起一行格式(\r\n)转换成Linux的另起一行格式(\n)(3)对数组排序4.cut命令--对行内容进行字段截取5.split命令--linux下将一个大的文件拆…

Django3.2使用xadmin2遇到的问题

使用xadmin2遇到的问题&解决 环境配置: 使用的模块版本:关联的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-reversion >= 2.0.0 django-formto…