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…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的,比GNOME简单得多! 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
