scss使用自定义函数实现单位像素随屏幕比例动态缩放
vue中通过变量和scss函数来动态实现动态缩放像素
简单来说就是比例缩小时,像素单位变大,从而字体大小相对不变,以下仅处理比例缩小的状况
自定义一个属性–size,初始值为1px
template
<template><div class="home" style="--size:1px">hello world!</div>
</template>
map为:{100: 1, 90: 1.1, 80: 1.2, 75: 1.3, 67: 1.5, 50: 2, 33: 3, 25: 4 }
- 屏幕100%时,size=1 => mpx(1) => 1px
- 屏幕90%时,size=1.1 => mpx(1) => 1.1px
- ……
js
export default {name: "Index",data() {return {// 屏幕缩放比例对应的zoom值map = {100: 1, 90: 1.1, 80: 1.2, 75: 1.3, 67: 1.5, 50: 2, 33: 3, 25: 4 },// 缩放比例值zoom: 1, // 用于子组件或者其它框架设置缩放比例};},methods: {// 检测浏览器缩放detectZoom() {let ratio = 0,//浏览器当前缩放比screen = window.screen,//获取屏幕ua = navigator.userAgent.toLowerCase();//判断登陆端是pc还是手机if (window.devicePixelRatio !== undefined) {ratio = window.devicePixelRatio;}else if (~ua.indexOf('msie')) {if (screen.deviceXDPI && screen.logicalXDPI) {ratio = screen.deviceXDPI / screen.logicalXDPI;}}else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {ratio = window.outerWidth / window.innerWidth;}if (ratio) {ratio = Math.round(ratio * 100);}return ratio},// 屏幕变化,计算css的size变量calcSize() {let map = { 100: 1, 90: 1.1, 80: 1.2, 75: 1.3, 67: 1.5, 50: 2, 33: 3, 25: 4 }let ratio = this.detectZoom();let size = map[ratio] || 1;this.zoom = size;// 重设--size属性的值document.querySelector('.home').style.cssText = `--size: ${size}px`// document.getElementsByClassName('home')[0].style.setProperty("--size", size + "px");}},mounted() {this.calcSize();window.addEventListener('resize', () => {// 首页才响应if (this.$route.name == 'Index') {this.calcSize();}});}
}
calcSize()中重设了–size的值后,触发函数,在函数在使用calc()计算最新的值,从而实现缩放控制。
scss
<style scoped lang="scss">
// 在scss中使用函数
@function mpx($size: 1) {@return calc(#{$size} * var(--size)) // 入参$size=10, 当属性--size=1.1px时 return 11px
}.home{font-size: mpx(10); // --size=1时,font-size=10; --size=1.1时,font-size=11 单位根据--size来变换
}
</style>
css中最关键的是使用var()来定义一个属性,然后在js中修改这个属性的值
https://blog.csdn.net/weixin_45977607/article/details/122473489
https://juejin.cn/post/7070762204286435359
相关文章:
scss使用自定义函数实现单位像素随屏幕比例动态缩放
vue中通过变量和scss函数来动态实现动态缩放像素 简单来说就是比例缩小时,像素单位变大,从而字体大小相对不变,以下仅处理比例缩小的状况 自定义一个属性–size,初始值为1px template <template><div class"hom…...
Django 静态自定义化配置
STATIC # APP本地静态资源目录(就APP对应的) STATIC_URL "/static/"# 远程静态文件URL(少用) REMOTE_STATIC_URL# 外部引用静态文件目录(外层的) STATICFILES_DIRS [os.path.join(BASE_DIR, &…...
TensorFlow入门(十四、数据读取机制(1))
TensorFlow的数据读取方式 TensorFlow的数据读取方式共有三种,分别是: ①预加载数据(Preloaded data) 预加载数据的方式,其实就是静态图(Graph)的模式。即将数据直接内嵌到Graph中,再把Graph传入Session中运行。 示例代码如下: import tensorflow.compat.v1 as tf tf.disabl…...
hyperf框架WebSocket 服务
1:安装 composer require hyperf/websocket-server2:配置 Server 修改 config/autoload/server.php,增加以下配置。 return [servers > [[name > ws,type > Server::SERVER_WEBSOCKET,host > 0.0.0.0,port > 9502,sock_typ…...
前端模块化
当我们从公司招聘上看到要求模块化的内容。 能从这几个角度回答,就说明我们是懂模块化的。 1. 模块化的本意,是当遇到一个复杂项目的时候(简单的不建议用),把这个复杂的问题拆分成相对独立的模块,降低程序…...
如何使用Docker轻松构建和管理应用程序(一)
如今Docker的使用已经非常普遍,特别在一线互联网公司。使用Docker技术可以帮助企业快速水平扩展服务,从而到达弹性部署业务的能力。在云服务概念兴起之后,Docker的使用场景和范围进一步发展,如今在微服务架构越来越流行的情况下&a…...
uniapp 获取地理位置(uni#getLocation和高德sdk获取中文地址)
参考 https://uniapp.dcloud.net.cn/api/location/location.html https://ask.dcloud.net.cn/article/35070 1. uniapp api获取经纬度 uni.getLocation({type: wgs84,success: function (res) {console.log(当前位置的经度: res.longitude);console.log(当前位…...
openmp 通用核心 学习 2 数据环境—任务-内存模型
目录 openmp 数据环境 子句: 在上述三个子句中也可以传入指针和数组 openmp 任务: openmp内存模型: openmp 数据环境 子句: shared(list) private(list)//默认构造 值未被初始化 对于图6-5: //File #1 int tm…...
Linux有哪些指令
Linux操作系统提供了许多指令,可以帮助用户进行各种操作。以下是一些常见的Linux指令: ls:列出当前目录下的文件和目录。cd:改变当前工作目录。pwd:显示当前工作目录。mkdir:创建新的目录。rm:…...
图扑 HT for Web 风格属性手册教程
图扑软件明星产品 HT for Web 是一套纯国产化独立自主研发的 2D 和 3D 图形界面可视化引擎。HT for Web(以下简称 HT)图元的样式由其 Style 属性控制,并且不同类型图元的 Style 属性各不相同。为了方便查询和理解图元的 Style 属性࿰…...
oracle 数据库删除序列
oracle 数据库删除序列 要删除 Oracle 数据库中的序列,你可以使用以下的 SQL 命令: DROP SEQUENCE sequence_name;其中,sequence_name 是你想删除的序列的名称。你需要确保当前用户对序列拥有适当的权限。 请注意,删除序列将永…...
JAVA毕业设计098—基于Java+Springboot的在线教育课程视频(源码+数据库)
基于JavaSpringboot的在线教育课程视频(源码数据库)098 一、系统介绍 本系统分为管理员、教师、用户三种角色(角色菜单可自行分配) 用户功能: 注册、登录、课程搜索、视频观看、课程资料发布、资料浏览、用户中心、我的发布、通知信息、密码修改 教师功能&…...
如何在雷电模拟器上安装Magisk并加载movecert模块抓https包(二)
接来下在PC端安装和配置Charles,方法同下面链接,不再赘述。在模拟器上安装magisk实现Charles抓https包(二)_小小爬虾的博客-CSDN博客 一、记录下本机IP和代理端口 二、在手机模拟器上设置代理192.168.31.71:8888,设置…...
基于web的酒店客房管理系统
目录 前言 一、技术栈 二、系统功能介绍 用户信息管理 会员信息管理 客房信息管理 收藏客房管理 用户入住管理 客房清扫管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施…...
linux查看系统信息
Linux查看当前操作系统版本信息 cat /proc/version Linux version 2.6.32-696.el6.x86_64 (mockbuildc1bm.rdu2.centos.org) (gcc version 4.4.7 20120313 (Red Hat 4.4.7-18) (GCC) ) #1 SMP Tue Mar 21 19:29:05 UTC 2017 Linux查看版本当前操作系统内核信息 uname -a Linux…...
蓝牙官网demo的记录
目录 一、官网蓝牙demo 二、可以参考的博客带蓝牙demo 一、官网蓝牙demo 平常看android官网,发现有两个不同的文档地址: 连接 | Android 开源项目 | Android Open Source Project 蓝牙概览 | Connectivity | Android Developers 蓝牙demo在 …...
Linux相关概念及常见指令
注意:本篇博客除了讲解Linux的相关指令,还穿插着Linux相关概念及原理的讲解。 账号相关指令 whoami:查看当前用户 adduser 用户名: 添加新用户 passwd 用户名:为这个用户设置密码 ls指令 1.Linux中文件的理解 文件是Linux中存储数据的基本单…...
CentOS 系统如何在防火墙开启端口
在 CentOS 上,你可以使用 firewall-cmd 命令来开启防火墙的特定服务或端口。以下是在 CentOS 上开启 3306 端口的步骤: 检查防火墙状态:可以使用以下命令检查防火墙的状态: sudo firewall-cmd --state如果防火墙处于活动状态&…...
2023年电工(初级)证考试题库及电工(初级)试题解析
题库来源:安全生产模拟考试一点通公众号小程序 2023年电工(初级)证考试题库及电工(初级)试题解析是安全生产模拟考试一点通结合(安监局)特种作业人员操作证考试大纲和(质检局&#…...
vue拦截器是什么,如何使用
Vue拦截器是一种用来拦截并处理HTTP请求和响应的机制,它可以在请求或响应发送前或后进行一些预处理或处理。在Vue中,可以使用axios库来实现拦截器,axios库是一个基于Promise的HTTP客户端,可以用于浏览器和Node.js平台。 使用axio…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
