当前位置: 首页 > news >正文

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函数来动态实现动态缩放像素 简单来说就是比例缩小时&#xff0c;像素单位变大&#xff0c;从而字体大小相对不变&#xff0c;以下仅处理比例缩小的状况 自定义一个属性–size&#xff0c;初始值为1px template <template><div class"hom…...

Django 静态自定义化配置

STATIC # APP本地静态资源目录&#xff08;就APP对应的&#xff09; STATIC_URL "/static/"# 远程静态文件URL&#xff08;少用&#xff09; REMOTE_STATIC_URL# 外部引用静态文件目录&#xff08;外层的&#xff09; 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&#xff1a;安装 composer require hyperf/websocket-server2&#xff1a;配置 Server 修改 config/autoload/server.php&#xff0c;增加以下配置。 return [servers > [[name > ws,type > Server::SERVER_WEBSOCKET,host > 0.0.0.0,port > 9502,sock_typ…...

前端模块化

当我们从公司招聘上看到要求模块化的内容。 能从这几个角度回答&#xff0c;就说明我们是懂模块化的。 1. 模块化的本意&#xff0c;是当遇到一个复杂项目的时候&#xff08;简单的不建议用&#xff09;&#xff0c;把这个复杂的问题拆分成相对独立的模块&#xff0c;降低程序…...

如何使用Docker轻松构建和管理应用程序(一)

如今Docker的使用已经非常普遍&#xff0c;特别在一线互联网公司。使用Docker技术可以帮助企业快速水平扩展服务&#xff0c;从而到达弹性部署业务的能力。在云服务概念兴起之后&#xff0c;Docker的使用场景和范围进一步发展&#xff0c;如今在微服务架构越来越流行的情况下&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(当前位置的经度&#xff1a; res.longitude);console.log(当前位…...

openmp 通用核心 学习 2 数据环境—任务-内存模型

目录 openmp 数据环境 子句&#xff1a; 在上述三个子句中也可以传入指针和数组 openmp 任务&#xff1a; openmp内存模型&#xff1a; openmp 数据环境 子句&#xff1a; shared(list) private(list)//默认构造 值未被初始化 对于图6-5&#xff1a; //File #1 int tm…...

Linux有哪些指令

Linux操作系统提供了许多指令&#xff0c;可以帮助用户进行各种操作。以下是一些常见的Linux指令&#xff1a; ls&#xff1a;列出当前目录下的文件和目录。cd&#xff1a;改变当前工作目录。pwd&#xff1a;显示当前工作目录。mkdir&#xff1a;创建新的目录。rm&#xff1a;…...

图扑 HT for Web 风格属性手册教程

图扑软件明星产品 HT for Web 是一套纯国产化独立自主研发的 2D 和 3D 图形界面可视化引擎。HT for Web&#xff08;以下简称 HT&#xff09;图元的样式由其 Style 属性控制&#xff0c;并且不同类型图元的 Style 属性各不相同。为了方便查询和理解图元的 Style 属性&#xff0…...

oracle 数据库删除序列

oracle 数据库删除序列 要删除 Oracle 数据库中的序列&#xff0c;你可以使用以下的 SQL 命令&#xff1a; DROP SEQUENCE sequence_name;其中&#xff0c;sequence_name 是你想删除的序列的名称。你需要确保当前用户对序列拥有适当的权限。 请注意&#xff0c;删除序列将永…...

JAVA毕业设计098—基于Java+Springboot的在线教育课程视频(源码+数据库)

基于JavaSpringboot的在线教育课程视频(源码数据库)098 一、系统介绍 本系统分为管理员、教师、用户三种角色(角色菜单可自行分配) 用户功能&#xff1a; 注册、登录、课程搜索、视频观看、课程资料发布、资料浏览、用户中心、我的发布、通知信息、密码修改 教师功能&…...

如何在雷电模拟器上安装Magisk并加载movecert模块抓https包(二)

接来下在PC端安装和配置Charles&#xff0c;方法同下面链接&#xff0c;不再赘述。在模拟器上安装magisk实现Charles抓https包&#xff08;二&#xff09;_小小爬虾的博客-CSDN博客 一、记录下本机IP和代理端口 二、在手机模拟器上设置代理192.168.31.71:8888&#xff0c;设置…...

基于web的酒店客房管理系统

目录 前言 一、技术栈 二、系统功能介绍 用户信息管理 会员信息管理 客房信息管理 收藏客房管理 用户入住管理 客房清扫管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施…...

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官网&#xff0c;发现有两个不同的文档地址&#xff1a; 连接 | Android 开源项目 | Android Open Source Project 蓝牙概览 | Connectivity | Android Developers 蓝牙demo在 …...

Linux相关概念及常见指令

注意&#xff1a;本篇博客除了讲解Linux的相关指令&#xff0c;还穿插着Linux相关概念及原理的讲解。 账号相关指令 whoami:查看当前用户 adduser 用户名: 添加新用户 passwd 用户名&#xff1a;为这个用户设置密码 ls指令 1.Linux中文件的理解 文件是Linux中存储数据的基本单…...

CentOS 系统如何在防火墙开启端口

在 CentOS 上&#xff0c;你可以使用 firewall-cmd 命令来开启防火墙的特定服务或端口。以下是在 CentOS 上开启 3306 端口的步骤&#xff1a; 检查防火墙状态&#xff1a;可以使用以下命令检查防火墙的状态&#xff1a; sudo firewall-cmd --state如果防火墙处于活动状态&…...

2023年电工(初级)证考试题库及电工(初级)试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年电工&#xff08;初级&#xff09;证考试题库及电工&#xff08;初级&#xff09;试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#…...

vue拦截器是什么,如何使用

Vue拦截器是一种用来拦截并处理HTTP请求和响应的机制&#xff0c;它可以在请求或响应发送前或后进行一些预处理或处理。在Vue中&#xff0c;可以使用axios库来实现拦截器&#xff0c;axios库是一个基于Promise的HTTP客户端&#xff0c;可以用于浏览器和Node.js平台。 使用axio…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

算术操作符与类型转换:从基础到精通

目录 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符&#xff1a;、-、*、/、% 赋值操作符&#xff1a;和复合赋值 单⽬操作符&#xff1a;、--、、- 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...

32单片机——基本定时器

STM32F103有众多的定时器&#xff0c;其中包括2个基本定时器&#xff08;TIM6和TIM7&#xff09;、4个通用定时器&#xff08;TIM2~TIM5&#xff09;、2个高级控制定时器&#xff08;TIM1和TIM8&#xff09;&#xff0c;这些定时器彼此完全独立&#xff0c;不共享任何资源 1、定…...