UNI-APP_vmin横屏适配问题

vmax和vmin

vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

当竖屏布局时750rpx是竖屏布局屏幕的宽度
vmin不管横竖屏的情况下,100vmin都是手机屏幕的宽度,所以rpx与vmin之间有一个换算的关系:

x rpx=( x * 100 / 750)vmin

75rpx转化为vmin就是 75 * 100/750=10vmin
所以我们将rpx转化成vmin就可以正常的进行横屏的开发
设计图以1920*1080尺寸设计,蓝湖尺寸查看宽设置为4800

适配示例

<style lang="scss" scoped>@function tovmin($rpx) {/* $rpx为需要转换的字号 */@return #{$rpx * 100 / 750}vmin;}.dom {/* 铺满整屏 */width: tovmin(4800);height: tovmin(750);}
</style>

在这里插入图片描述

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

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

相关文章

Claude使用教程,解决Claude不能回复

Claude是ChatGPT最为有⼒的竞争对⼿之⼀&#xff0c;Claude 的研发公司是专注人工智能安全和研究的初创公司 Anthropic&#xff0c;由前 OpenAI 员工共同创立的。今年 3 月份 Anthropic 获得了谷歌 3 亿美元的投资&#xff0c;谷歌也因此获得其 10% 股份。 ⽬前可以通过官⽹加…

【Accumulate】Gitee解决每次推送输入账户密码问题

【前言】 每次建立私人仓库后&#xff0c;一推送就得输入账户密码&#xff0c;真的巨烦人啊。 【解决】 step1&#xff1a; 绑定私匙&#xff1a; 配置Git_犟小孩的博客-CSDN博客 step2&#xff1a; 每次绑定远程仓库的时候&#xff0c;使用SSH绑定 如果已经绑定过了&…

目标检测舰船数据集整合

PS&#xff1a;大家如果有想要的数据集可以私信我&#xff0c;如果我下载了的话&#xff0c;可以发给你们~ 一、光学数据集 1、 DIOR 数据集(已下载yolo版本)&#xff08;论文中提到过&#xff09; DIOR由23463张最优遥感图像和190288个目标实例组成&#xff0c;这些目标实例用…

【适配器模式】—— 每天一点小知识

&#x1f4a7; 适配器模式 \color{#FF1493}{适配器模式} 适配器模式&#x1f4a7; &#x1f337; 仰望天空&#xff0c;妳我亦是行人.✨ &#x1f984; 个人主页——微风撞见云的博客&#x1f390; &#x1f433; 《数据结构与算法》专栏的文章图文并茂&#x1f995;…

【源码】vue2+element+laravel8开发不良事件上报系统源码

系统概述&#xff1a; 医院不良事件报告系统为医院内质量控制、患者安全关注、医疗安全不良事件方面的精细化的管理提供了平台&#xff0c;是等级医院评审的必备内容&#xff0c;评审要求医院直报系统要与卫生部“医疗安全(不良)事件报告系统”建立网络对接。 不良事件报告系统…

C语言 base32与base64加解密

概述 Base32、Base64编码就是分别用32个、64个可打印字符表示二进制数据。 一、Base32规则 32 2^5&#xff0c;所以需要5 Bit来表示一个base32字符。一个字节8 Bit&#xff0c;5和8的最小公倍数是40。编码的过程中&#xff0c;以5个字节为一组转为8个base32字符&#xff0c;不…

【Redisson】Redisson--分布式远程服务(Remote Service)

Redisson系列文章&#xff1a; 【Redisson】Redisson–基础入门【Redisson】Redisson–布隆(Bloom Filter)过滤器【Redisson】Redisson–分布式锁的使用&#xff08;推荐使用&#xff09;【分布式锁】Redisson分布式锁底层原理【Redisson】Redisson–限流器 文章目录 一、Redi…

目标检测+车道线识别+追踪+测距(代码+部署运行)

目标检测车道线识别追踪测距 本文主要讲述项目集成&#xff1a;从车道线识别、测距、到追踪&#xff0c;集各种流行模型于一体&#xff01; 不讲原理&#xff0c;直接上干货&#xff01; 把下文环境配置学会&#xff0c;受益终生&#xff01; 各大项目皆适用&#xff01; …

java项目之高校二手交易平台(ssm+jsp+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的高校二手交易平台。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 &#x1f495;&#x1f495;作者&#xff1a;风歌&…

Linux VS Windows 孰优孰劣?

目录 1. 开源 vs. 闭源&#xff1a;2. 用户界面&#xff1a;3. 软件兼容性&#xff1a;4. 系统安全性&#xff1a;5. 社区支持和文档资源&#xff1a; Linux和Windows是两个主要的操作系统&#xff0c;它们在很多方面都有不同的特点和使用体验。以下是对Linux和Windows进行比较…

微信开发者工具模拟器中不显示鼠标问题

前言 在使用微信开发者工具开发微信小程序时&#xff0c;使用到了第二屏幕&#xff0c;在第一屏幕上&#xff0c;微信开发者工具模拟器中&#xff0c;可以正常显示鼠标&#xff0c;而在第二屏幕上不显示鼠标。 解决方案&#xff1a; 方案1&#xff1a;设置指针轨迹&#xff…

scratch 鼠标控制角色移动

scratch 鼠标控制角色 本程序使用鼠标操作“机器人”角色跟随鼠标&#xff0c;距离较小时暂停移动&#xff1b;“小狗”角色连续在随机位置生成、水平移动、碰到边缘反弹、碰到“机器人”角色时删除。 目前scratch程序的制作已经告一段落了&#xff0c;进一步开发需要更多规划…