UNI-APP_vmin横屏适配问题

news2024/11/17 5:38:30

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.coloradmin.cn/o/727503.html

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

相关文章

Web漏洞-敏感信息泄露-Git操作

实验目的 熟悉常见git常见操作&#xff0c;如上传、回归、修改仓库等操作。 实验环境 git操作服务器&#xff0c;1台 web安全操作机&#xff0c;1台&#xff08;可选&#xff09; 实验内容 1.安装Git&#xff1a;sudo apt-get install git 2.安装Apache&#xff0c;为了模…

机器学习技术(二)——Python科学运算模块(Numpy、Pandas)

机器学习技术&#xff08;二&#xff09;——Python科学运算模块&#xff08;Numpy、Pandas&#xff09; 文章目录 机器学习技术&#xff08;二&#xff09;——Python科学运算模块&#xff08;Numpy、Pandas&#xff09;一、Numpy1、介绍、安装与导入2、Numpy常用操作 二、Pan…

Java面向对象程序开发——多线程开发

文章目录 前言多线程多线程的实现①、继承Thread类Thread常用方法Thread的构造器优缺点 ②、实现Runnable接口优缺点 ③、实现Callable接口Runnable接口和继承Thread类的区别 线程同步机制volatile同步锁 同步方法lock锁 线程池 前言 线程(thread)是一个程序内部的一条执行路径…

shared_ptr产生内存泄漏的场景

使用 shared_ptr 可以帮助管理动态分配的内存&#xff0c;它使用引用计数的方式来跟踪共享对象的引用数量&#xff0c;当引用计数为零时&#xff0c;会自动释放内存。然而&#xff0c;shared_ptr 也存在一些潜在的内存泄漏的场景&#xff0c;下面是一些常见的情况&#xff1a; …

LVS和keepa lived群集

keepa lived 简述 一.keepalived 服务重要功能 1管理LS负载均衡器软件 keepalived可以通过读取自身的配置文件&#xff0c;实现通过更底层的接口直接管理Lvs配置以及服务的启动 停止功能 这会使 LVS应用跟更加简便 2 支持故障自动切换 (failover) ①两台知己同时安装好kee…

网络字节序和套接字

4.1主机字节序列和网络字节序列 主机字节序列分为&#xff1a;大端字节序和小端字节序 大端&#xff1a;高位字节存储在内存的低地址处&#xff0c;低位字节存储在内存的高地址处。 小端&#xff1a;高位字节存储在内存的高地址处&#xff0c;低位字节存储在内存的低地址处。…

【算法基础】数据结构

链表 单链表 826. 单链表 - AcWing题库 #include<bits/stdc.h> using namespace std; const int N 100010; int m; int e[N],ne[N];//记录数据和下一结点坐标 int head,idx;//当前指向的结点 void init() {head-1;idx0; } void addtohead(int x) {e[idx]x;ne[idx]hea…

前端框架Vue

Vue 介绍 官方网站&#xff1a;https://cn.vuejs.org/ Vue.js是一种用于构建用户界面的开源JavaScript框架。它是一种轻量级的框架&#xff0c;易于学习和使用。它基于标准HTML&#xff0c;CSS和JavaScript构建&#xff0c;并提供了一套生声明式的&#xff0c;组件时的编程模…

【深入浅出 Spring Security(十三)】使用 JWT 进行前后端分离认证(附源码)

使用 JWT 进行前后端分离认证 一、JWT 的简单介绍二、使用 JWT 进行安全认证后端结合SpringSecurity实现前端Vue3结合Pinia、Axios实现测试结果 一、JWT 的简单介绍 JWT 全称 Java web Token&#xff0c;在此所讲述的是 JWT 用于身份认证&#xff0c;用服务器端生成的JWT去替代…

spring--Ioc控制反转/DI依赖注入

IOC控制反转-解耦 1.概念&#xff1a;在使用对象的时候&#xff0c;由主动的new转换为外部提供对象&#xff0c;将对象创建的控制权交给外部&#xff0c;即控制反转 2.spring提供了一个容器&#xff0c;称为IOC容器&#xff0c;用来从当ioc中的外部 3.被管理或者被创建的对象在…

ChatGPT实战:如何规划自己的职业生涯?

ChatGPT的出现&#xff0c;不仅改变了人们对人工智能技术的认识&#xff0c;也对经济社会发展产生了深远的影响。那么&#xff0c;在ChatGPT时代&#xff0c;人们应该如何规划自己的职业呢&#xff1f; 职业规划是一个有意义且重要的过程&#xff0c;它可以帮助你在职业生涯中…

什么是BI可视化?企业管理决策为什么要用BI系统?

在当今的商业环境中&#xff0c;数据已经成为企业决策制定的重要基础。然而&#xff0c;面对海量的数据&#xff0c;如何有效地分析和利用这些数据&#xff0c;成为了企业管理者面临的一大挑战。BI(Business Intelligence)系统应运而生&#xff0c;它可以帮助企业管理者从复杂的…

基于Java企业人事管理系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

如何用好强大的 TDengine 集群 ? 先了解 RAFT 在 3.0 中的应用

大家都知道&#xff1a;由于单机数据库在数据规模、并发访问量等方面存在瓶颈&#xff0c;无法满足大规模应用的需求。因此才有了把数据切割分片&#xff0c;分布存储分布处理在多个节点上的数据库&#xff0c;也就是分布式数据库的由来。 而为了实现数据库的高可用&#xff0…

新装Ubuntu虚拟机环境--基本配置流程

新装Ubuntu虚拟机环境--基本配置流程 安装vmware tools修改源 安装vmware tools 点击菜单栏–>虚拟机–>安装VMwaretools桌面上有个图标&#xff0c;点进去 打开这个压缩包–>Extract到桌面&#xff08;or别的文件夹都可以&#xff0c;如果提示空间不足就换其它文件夹…

手把手写一个LED驱动(1)

目录 1.开启驱动开发之路 1.1、驱动开发的准备工作 1.2、驱动开发的步骤 1.3、实践 2.最简单的模块源码分析 2.1、常用的模块操作命令 2.2、模块的安装 2.3、模块的版本信息vermagic 2.4、模块卸载 2.5、模块中常用宏(MODULE_xxx这种宏的作用是用来添加模块描述信息) …

2023年仪器仪表行业研究报告

第一章 行业概况 仪器仪表行业是指专门从事研究、设计、制造、销售和服务于科学研究、生产和生活中所需的各种仪器、仪表和自动化设备的行业。这些仪器和仪表可以用于测量、指示、记录、调节和控制物理、化学和生物过程中的各种参数。这个行业涵盖了广泛的设备和系统&#xff…

今日分享:Midjourney巧妙地用参考图/垫图来绘画图

大家都知道AI绘画工具每次生成的效果都是随机的&#xff0c;但是现在很多AI绘图工具都提供了利用参考图/垫图的方式出图&#xff0c;这样就可以让让AI画作生成自己想要的布局、场景、色彩等等。 国内的AI绘图工具一般都好操作&#xff0c;国外主流的Midjourney也可以添加参考图…

利用for循环和innerHTML在div中再填入多个div

目录 棋盘给每个小格子加上不同的id加上不同的参数传入 我们设置小格子的点击触发事件 循环填充元素 棋盘 先做棋盘&#xff0c;点击出现 <!DOCTYPE HTML> <html><head><meta charset"utf-8"><style>.sty1{background-color:#aaa;he…

旅游网站制作搭建,为旅行业务带来新机遇

旅游业在全球范围内一直都是蓬勃发展的行业之一。随着互联网的普及以及人们对旅行需求的增加&#xff0c;拥有一个精美而功能强大的旅游网站已经成为了旅行从业者的必备条件。本文旨在简单介绍旅游网站是什么&#xff0c;旅游网站的好处&#xff0c;并提供一些快速制作搭建旅游…