不同分辨率下页面自适应方法

news2024/9/28 11:21:02

首先在utils文件下新建一个js文件命名为screenSize.js
在这里插入图片描述
然后在需要做自适应的页面文件中引入import {screenSize} from ‘@/utils/screenSize’
最外层div中用ref命名在这里插入图片描述
最后在mounted中使用该方法在这里插入图片描述
记得style中给login宽1920px,高1080px
在这里插入图片描述

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

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

相关文章

慎投!双1区 SSCI TOP刊竟也被On Hold预警!你踩雷了吗?

点击关注:关注GZH【欧亚科睿学术】,第一时间了解科研最新动态! 本期小编给大家解析的是文学类《Comunicar》期刊,中文名称为《交流》,所有文章均为西班牙语和英语双语,值得一提的是被中科院分区为1区TOP的期…

由一个 SwiftData “诡异”运行时崩溃而引发的钩深索隐(二)

概述 从 WWDC 23 开始,苹果推出了崭新的数据库框架 SwiftData。默认在 SwiftData 中所有对数据的操作都会在主线程中进行,稍有不慎就会让 App 变得“鹅行鸭步” 那么,对于耗时的数据操作我们该如何优雅的面对?又如何让界面与其“…

开放式耳机的优缺点?有什么推荐吗?四款开放式蓝牙耳机推荐

开放式耳机的优点有很多其实,但是每个东西多多少少都是一把双刃剑,所以缺点当然也是有的。那就先讲它的优点: 首先因为不入耳的设计,耳机不是直接塞入耳道的,所以能让耳道保持“呼吸”,减少长时间佩戴导致…

基于 AT 固件测试 ESP32 设备作为 WiFi AP 模式创建 TCP Server 开启 UART-to-WiFi 透传模式的指令序列

AT 指令序列如下 ATRESTOREATCWMODE2 // Set the Wi-Fi mode toSoftAP.ATCWSAP"ESP32_softAP","1234567890",5,3 // Set softAPATCIPMUX1 // Enable multiple connections for TCP ServerATCIPSERV…

Windows安装使用Docker

配置Dorker环境 启用或关闭windows功能 安装wsl 以管理员身份打开windows PowerShell,安装相关配置 下载docker应用程序 Releases tech-shrimp/docker_installer (github.com) 安装Docker 默认双击程序就开始安装了,要安装在指定位置,提…

Java | Leetcode Java题解之第391题完美矩形

题目&#xff1a; 题解&#xff1a; class Solution {public boolean isSubsequence(String s, String t) {int n s.length(), m t.length();int[][] f new int[m 1][26];for (int i 0; i < 26; i) {f[m][i] m;}for (int i m - 1; i > 0; i--) {for (int j 0; j…

华为 HCIP-Datacom H12-821 题库 (7)

有需要题库的可以看主页置顶 V群仅进行学习交流 1.配置 VRRP 跟踪物理接口状态的命令是在华为设备上&#xff0c;以下哪一项是配置 VRRP 跟踪物理接口状态的命令&#xff1f; A、track vrrp vrid 1 interface GigabitEthernet0/0/0 B、vrrp vrid 1 track interface GigabitE…

AI 网关基于 IP 地理位置,增强 Prompt 修饰能力

作者&#xff1a;沈鑫糠&#xff0c;来自昆仑数智瑞道云团队&#xff0c;专注于云原生领域产品研发和相关技术。 前言 什么是 Prompt Engineering 提示词工程&#xff08;Prompt Engineering&#xff09;&#xff0c;也被称为上下文提示&#xff08;In-Context Prompting&am…

Elasticsearch之储存原理和优化

存储原理 上篇介绍了在 ES 内部索引的写处理流程&#xff0c;这个流程是在 ES 的内存中执行的&#xff0c;数据被分配到特定的分片和副本上之后&#xff0c;最终是存储到磁盘上的&#xff0c;这样在断电的时候就不会丢失数据。 具体的存储路径可在配置文件 ../config/elastics…

哨兵排序算法

代码展示 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h>#define MAXSIZE 20 //直接排序 typedef struct {int r[MAXSIZE 1];int length; } SqList; int InsertSort(SqList* L) {int i, j;for (i 2; i < L->length; i){if (L-…

10.2 TCP IP模型、IP协议、IPv4、子网掩码

TCP / IP 协议族 IP协议 IPv4地址 IPv4地址分类 子网掩码 子网掩码用来区分 网络地址 和 主机地址 真题 1

1024页 | 20万字详细讲解大数据系统平台设计

大数据引擎系统针对互联网业务系统对海量大数据的分布式存储、计算、 分析挖掘、建模及业务查询需求&#xff0c;通过提供基于分布式数据仓库的离线计算、实 时计算等服务&#xff0c;实现涵盖数据全生命周期的完整数据处理。大数据服务分系统主 要任务是构建大数据仓库&#x…

IP风险画像如何维护网络安全

在当今数字化时代&#xff0c;互联网已成为我们生活、工作不可或缺的一部分。然而&#xff0c;随着网络应用的日益广泛&#xff0c;网络安全问题也日益凸显。为了有效应对网络安全挑战&#xff0c;IP风险画像技术应运而生&#xff0c;正逐步成为构建网络安全新防线的重要工具。…

华为云征文|华为云Flexus X实例docker部署MinIO对象存储系统obs

华为云征文&#xff5c;华为云Flexus X实例docker部署MinIO对象存储系统obs 什么是华为云Flexus X实例 华为云Flexus X实例云服务是新一代开箱即用、体验跃级、面向中小企业和开发者打造的高品价比云服务产品。Flexus云服务器X实例是新一代面向中小企业和开发者打造的柔性算力…

深度学习从入门到精通——基于unet++算法实现细胞分割

模型定义 import torch from torch import nn__all__ [UNet, NestedUNet]class VGGBlock(nn.Module):def __init__(self, in_channels, middle_channels, out_channels):super().__init__()self.relu nn.ReLU(inplaceTrue)self.conv1 nn.Conv2d(in_channels, middle_channe…

matlab实现简单的保角变换

用虚数的思想可以在虚坐标系内绘制圆&#xff0c;同样可以用虚数的想法将这个圆进行变换 用MATLAB绘制一个坐标在(1,1)的圆代码如下 % 定义半径和圆心 radius 10; center 1 1i; % 圆心位于 (1,1) % 创建角度向量&#xff0c;从0到2*pi theta linspace(0, 2*pi, 100);% 计…

运算放大器组成的比较器

D1,D2为5.3V稳压管。运放输出高时&#xff0c;为6V.运放输入1V&#xff0c;运放正端为2V. 运放输出低时&#xff0c;为-6V&#xff0c;运放输入4V&#xff0c;运放正端约为2V&#xff0c;实测值2.03V

JavaScript 实现虚拟滚动技术

虚拟滚动 虚拟滚动&#xff08;有时称为 虚拟列表、虚拟滚动条&#xff09;是 JavaScript 中的一种技术&#xff0c;旨在优化大数据量的列表渲染&#xff0c;尤其是当有成千上万的数据项时&#xff0c;直接渲染整个列表会导致性能问题。虚拟列表通过只渲染用户视口中可见的那一…

【HuggingFace Transformers】OpenAIGPTModel源码解析

OpenAIGPTModel源码解析 1. GPT 介绍2. OpenAIGPTModel类 源码解析 说到ChatGPT&#xff0c;大家可能都使用过吧。2022年&#xff0c;ChatGPT的推出引发了广泛的关注和讨论。这款对话生成模型不仅具备了强大的语言理解和生成能力&#xff0c;还能进行非常自然的对话&#xff0c…

手机免费录屏软件,这3款软件最佳选择

在数字化浪潮的推动下&#xff0c;智能手机已成为我们生活中不可或缺的一部分。而在这些小巧而强大的设备中&#xff0c;录屏功能逐渐崭露头角&#xff0c;成为记录屏幕精彩瞬间的得力助手。无论是游戏的高光时刻、APP的使用教程&#xff0c;还是进行远程会议&#xff0c;录屏功…