vue 和 js写屏幕自适应

实现屏幕自适应的方式有很多种,可以通过插件本身提供的方法,可以通过flex布局等,今天我们来写写通过js实现屏幕自适应。
以下是在vue中实现的屏幕自适应

  1. 首先在data中定义一下屏幕的默认大小和缩放比例
    在这里插入图片描述
  2. 然后在mounted中获取窗口的内置宽高,并计算缩放比例
    在这里插入图片描述
  3. 监听事件,当screen发生变化时,重新计算缩放比例

在这里插入图片描述

  1. 给最外层的div设置transform 属性,不要忘记要给固定宽高样式,app.vue中也要给固定宽高
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

  1. 在utils中新建一个rem.js文件,获取最外层的fontSize,并按比例计算
    在这里插入图片描述

  2. 在main.js中引入
    在这里插入图片描述
    至此,便完成了屏幕的自适应。

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

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

相关文章

揭秘软件测试秘籍:测试用例设计方法大揭秘

文章目录 引言一、等价类划分1.1 定义1.2 步骤1.3 等价类划分优点和缺点 二、边界值分析法2.1 定义2.2 步骤2.3 边界值分析法的优点和缺点 三、判定表法3.1 定义3.2 步骤3.3 判定表组成不分3.4 判定表的优点和缺点 四、正交实验法4.1 定义4.2 步骤4.3 正交实验法的优点和缺点 五…

2024.05.31 校招 实习 内推 面经

绿*泡*泡VX: neituijunsir 交流*裙 ,内推/实习/校招汇总表格 1、实习 | 上汽集团零束科技2024「ZONE引擎」(内推) 实习 | 上汽集团零束科技2024「ZONE引擎」计划正式启动(内推) 2、实习 | 华为上海海思…

基于Verilog表达的FSM状态机

基于Verilog表达的FSM状态机 1 FSM1.1 Intro1.2 Why FSM?1.3 How to do 在这里聚焦基于Verilog的三段式状态机编程; 1 FSM 1.1 Intro 状态机是一种代码实现功能的范式;一切皆可状态机; 状态机编程四要素:– 1.状态State&#…

基于51单片机的简易温控水杯恒温杯仿真设计( proteus仿真+程序+设计报告+讲解视频)

基于51单片机的简易温控水杯恒温杯仿真设计( proteus仿真程序设计报告讲解视频) 仿真图proteus7.8及以上 程序编译器:keil 4/keil 5 编程语言:C语言 设计编号:S0099 1. 主要功能: 基于51单片机的简易温控水杯恒温…

Hudi extraMetadata 研究总结

前言 研究总结 Hudi extraMetadata ,记录研究过程。主要目的是通过 extraMetadata 保存 source 表的 commitTime (checkpoint), 来实现增量读Hudi表写Hudi表时,保存增量读状态的事务性,实现类似于流任务中的 exactly-once 背景需求 有个需求:增量读Hudi表关联其他Hudi…

cuda 架构设置

import torch torch.cuda.get_device_capability(0) 添加cmake options: -DCMAKE_CUDA_ARCHITECTURES86 -DCMAKE_CUDA_COMPILER/usr/local/cuda-11.8/bin/nvcc cmake工程出现“CMAKE_CUDA_ARCHITECTURES must be non-empty if set.“的解决方法_failed to detec…

振动棒出口欧盟CE认证测试项目介绍

振动棒出口欧盟CE认证测试项目介绍 一、CE认证概述 CE认证是欧盟市场的一种强制性认证,主要用于确保产品符合欧盟内的基本安全、健康和环保要求。对于许多产品,特别是电子电气产品,CE标志是进入欧盟市场的必要条件。振动棒作为成人用品&…

【附带源码】机械臂MoveIt2极简教程(六)、第三个demo -机械臂的避障规划

系列文章目录 【附带源码】机械臂MoveIt2极简教程(一)、moveit2安装 【附带源码】机械臂MoveIt2极简教程(二)、move_group交互 【附带源码】机械臂MoveIt2极简教程(三)、URDF/SRDF介绍 【附带源码】机械臂MoveIt2极简教程(四)、第一个入门demo 【附带源码】机械臂Move…

中介子方程十四

X$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXαXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXαXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$XαXηXtXαX$XWXyX$XyXWX$XpXαXqXηX$XeXαXhX$XdX$XpX$XdX$XyXeXαX$XEXyXαXiX$XαXiX…

Java 获取客户端 IP 地址【工具类】

Java 获取客户端 IP 地址 import javax.servlet.http.HttpServletRequest; import java.net.InetAddress;/*** 网络工具类*/ public class NetUtils {/*** 获取客户端 IP 地址** param request 请求* return {link String}*/public static String getIpAddress(HttpServletReq…

Apache Flink 如何保证 Exactly-Once 语义

一、引言 在大数据处理中,数据的一致性和准确性是至关重要的。Apache Flink 是一个流处理和批处理的开源平台,它提供了丰富的语义保证,其中之一就是 Exactly-Once 语义。Exactly-Once 语义确保每个事件或记录只被处理一次,即使在…

源码编译构建LAMP

Apache 起源 源于A Patchy Server,著名的开源Web服务软件1995年时,发布Apache服务程序的1.0版本由Apache软件基金会(ASF)负责维护最新的名称为“Apache HTTP Server”官方站点:http://httpd.apache.org/ 主要特点 开发源代码/…

Mysql union语句

开源项目SDK:https://github.com/mingyang66/spring-parent 个人文档:https://mingyang66.github.io/raccoon-docs/#/ mysql union操作符用于连接两个以上的select语句的结果组合到一个结果集,并去除重复的行,每个select语句的雷叔…

com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException异常问题如何解决?

com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: SELECT command denied to user XXXXXXX for table sys_users这是一个 MySQL 权限问题,表示用户 “XXXXXX” 没有对表 “sys_users” 执行 SELECT 操作的权限。 解决方案: 检查用户权限&am…

【课程总结】Day8(上):深度学习基本流程

前言 在上一篇课程《【课程总结】Day7:深度学习概述》中,我们了解到: 模型训练过程→本质上是固定w和b参数的过程;让模型更好→本质上就是让模型的损失值loss变小;让loss变小→本质上就是求loss函数的最小值&#xf…

函数用于将字符串反转以及函数的作用

在C语言中&#xff0c;你可以通过交换字符串中字符的位置来实现字符串的反转。以下是一个简单的函数示例&#xff0c;用于反转一个字符串&#xff1a; c复制代码 #include <stdio.h> #include <string.h> void reverse_string(char *str) { char *start str;…

【深度学习】深入解码:提升NLP生成文本的策略与参数详解

文章目录 解码策略解码参数公式解释代码例子区别 更详细的束搜索的解释更详细的例子解释第一步第二步第三步 解码策略和解码参数在自然语言处理&#xff08;NLP&#xff09;模型的生成过程中起着不同的作用&#xff0c;但它们共同决定了生成文本的质量和特性。 解码策略 解码…

史上最全盘点:一文告诉你什么是erp?erp系统厂商分别有哪些?

✅ 什么是ERP&#xff1f; ERP是Enterprise Resource Planning&#xff08;企业资源计划&#xff09;的简称&#xff0c;ERP是针对物资资源管理&#xff08;物流&#xff09;、人力资源管理&#xff08;人流&#xff09;、财务资源管理&#xff08;资金流&#xff09;、信息资…

人工智能与图像识别:深度融合的新趋势

人工智能与图像识别正呈现深度融合的新趋势&#xff0c;这一趋势主要体现在以下几个方面&#xff1a; 深度学习技术的推动&#xff1a; 深度学习作为人工智能的重要分支&#xff0c;为图像识别提供了强大的技术支持。尤其是卷积神经网络&#xff08;CNN&#xff09;的发展&…

java MultipartFile 转 file

在Java中&#xff0c;MultipartFile 是Spring框架中用于处理上传文件的一个接口&#xff0c;而File则是Java标准库中表示文件的一个类。要将MultipartFile转换为File&#xff0c;可以使用MultipartFile的transferTo(File dest)方法。 以下是一个将MultipartFile转换为File的示…