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

vue3检测是手机还是pc端,监测视图窗口变化

 1.超小屏幕(手机) 768px以下
2.小屏设备(平板) 768px-992px
3.中等屏幕(旧式电脑) 992px-1200px
4.大屏设备(现代电脑) 1200px以上

<script setup name="welcome">
import { onMounted, ref } from 'vue'const screenWidth = ref(document.documentElement.clientWidth)
const isPhone = ref(screenWidth.value < 993) // 小于993视为平板及手机onMounted(() => {window.addEventListener('resize', () => {screenWidth.value = document.body.offsetWidthisPhone.value = document.body.offsetWidth < 993 // 小于993视为平板及手机
})const nextHandle = () => {window.location.href = isPhone.value ? 'https://www.baidu.com/' : 'https://element-plus.gitee.io/zh-CN/component/'
}
</script>

相关文章:

vue3检测是手机还是pc端,监测视图窗口变化

1.超小屏幕&#xff08;手机&#xff09; 768px以下 2.小屏设备&#xff08;平板&#xff09; 768px-992px 3.中等屏幕&#xff08;旧式电脑&#xff09; 992px-1200px 4.大屏设备&#xff08;现代电脑&#xff09; 1200px以上 <script setup name"welcome"> i…...

B - Magical Subsequence (CCPC2021哈尔滨)

思路&#xff1a; &#xff08;1&#xff09;问题&#xff1a;对于已知数组&#xff0c;每组依次选两个&#xff0c;尽量选更多组&#xff0c;选的每组和相等&#xff1b;&#xff08;假定和为x) &#xff08;2&#xff09;于是问题拆分为两步&#xff0c; x是多少x确定时&a…...

Leetcode刷题详解——x的平方根

1. 题目链接&#xff1a;69. x 的平方根 2. 题目描述&#xff1a; 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 **注意&#xff1a;**不允许使用任何内置指数函数和…...

windows安装docker,解决require wsl 2问题

想在windows上安装桌面版docker&#xff0c;上官网下载了安装包&#xff0c;安装完后&#xff0c;启动报错&#xff0c;忘了截图了。 大概意思就是require wsl 2。 于是就是docker FAQ中找相关问题解决方案&#xff0c;点&#xff0c;点&#xff0c;点然后就点到微软了。 ws…...

建立复数类

目录 程序设计 程序分析 系列文章 在课堂示例的基础上,显示复数时如果虚部为0时只显示实部,实部为0时只显示虚部,虚部为负数时以a-bi的形式显示,并为复数类增加减法功能。 程序设计 Work4类: package work;import java.util.Scanner;public class Work4 {private in…...

docker部署prometheus+grafana服务器监控(三) - 配置grafana

查看 prometheus 访问 http://ip:9090/targets&#xff0c;效果如下&#xff0c;上面我们通过 node_exporter 收集的节点状态是 up 状态。 配置 Grafana 访问 http://ip:3000&#xff0c;登录 Grafana&#xff0c;默认的账号密码是 admin:admin&#xff0c;首次登录需要修改…...

面试题:说一下加密后的数据如何进行模糊查询?

文章目录 正文如何对加密后的数据进行模糊查询沙雕做法沙雕一沙雕二 常规做法常规一常规二超神做法 总结 正文 我们知道加密后的数据对模糊查询不是很友好&#xff0c;本篇就针对加密数据模糊查询这个问题来展开讲一讲实现的思路&#xff0c;希望对大家有所启发。 为了数据安…...

LeetCode75——Day15

文章目录 一、题目二、题解 一、题目 1456. Maximum Number of Vowels in a Substring of Given Length Given a string s and an integer k, return the maximum number of vowel letters in any substring of s with length k. Vowel letters in English are ‘a’, ‘e’…...

Qwt开发环境搭建(保姆级教程)

1.简介 QWT&#xff0c;即Qt Widgets for Technical Applications&#xff0c;其目标是以基于2D方式的窗体部件来显示数据&#xff0c; 数据源以数值&#xff0c;数组或一组浮点数等方式提供&#xff0c; 输出方式可以是Curves&#xff08;曲线&#xff09;&#xff0c;Slider…...

【供应链】仓储、物流、车辆管理

...

从另外一个进程中读取数据

从另外一个进程中读取数据&#xff0c;其实就注入线程&#xff0c;寻址&#xff0c;解析内存&#xff0c;处理数据。例如这个就是从另外一个正在运行的进程中&#xff0c;读取数据并保存。实时性还可以。...

【FPGA零基础学习之旅#17】搭建串口收发与储存双口RAM系统

&#x1f389;欢迎来到FPGA专栏~搭建串口收发与储存双口RAM系统 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;FPGA学习之旅 文章作者技术和水平有限&#xff0c;如果文中出现错误&#xff0…...

建立Line类

目录 程序设计 程序分析 系列文章 计算机上的线实际上是线段,要求包含两个端点;颜色为彩虹色;线的粗细是类变量,至少包含show方法。 程序设计 Work5类: package work;import java.util.Scanner;public class Work5 { public static void main(String[] args) {// …...

10_集成学习方法:随机森林、Boosting

文章目录 1 集成学习&#xff08;Ensemble Learning)1.1 集成学习1.2 Why need Ensemble Learning?1.3 Bagging方法 2 随机森林(Random Forest)2.1 随机森林的优点2.2 随机森林算法案例2.3 随机森林的思考&#xff08;--->提升学习&#xff09; 3 随机森林&#xff08;RF&a…...

工业通信网关常用的工业通信协议

在工业领域中常常有不同的设备协同工作&#xff0c;而这些设备的通信协议和数据格式也有所差异&#xff0c;要想实现不同通信设备之间的数据传输互通&#xff0c;工业网关是一个重要的设备。 什么是工业网关 工业网关是一种能够连接多种不同设备并实现数据的收集、传输、处理和…...

如何将音频与视频分离

您一定经历过这样的情况&#xff1a;当你非常喜欢视频中的背景音乐时&#xff0c;希望将音频从视频中分离出来&#xff0c;以便你可以在音乐播放器中收听音乐。有没有一种有效的方法可以帮助您快速从视频中提取音频呢&#xff1f;当然是有的啦&#xff0c;在下面的文章中&#…...

【antd】form表单为空校验失效 form.item.rules传入非所需的api属性时,引起为空自动验证失效问题

现象 form表单的rules设置后&#xff0c;在form表单项为空时&#xff0c;不提醒required&#xff08;正常现象&#xff09;&#xff0c;当开始输入后&#xff0c;马上触发了required为空校验&#xff0c;但此时表担心Input明明是有值的。 问题背景&#xff1a; form.item.ru…...

数据可视化的常见工具

Tableau: Tableau是一种流行的商业数据可视化工具&#xff0c;可以连接各种数据源&#xff0c;创建交互式仪表板和报告。它提供了强大的图表和图形功能。 Power BI: Power BI是微软的数据分析和可视化工具&#xff0c;与Microsoft生态系统紧密集成。它支持从多个数据源创建可视…...

不希望你的数据在云中?关闭iPhone或Mac上的iCloud

​如果你不想使用iCloud&#xff0c;可以很容易地从设备设置中选择退出并关闭它。当你禁用iCloud时&#xff0c;它会删除该设备对iCloud的访问&#xff0c;但不会删除苹果服务器上的任何数据。我们将在本文末尾向你展示如何做到这一点。 注销iCloud并完全禁用它 如果你根本不…...

10 个最佳免费 PDF 压缩工具软件

PDF 是一种全球流行的文件格式&#xff0c;可在不损失质量或文本对齐的情况下传输文档。问题是许多文件共享应用程序和网站限制您可以共享或上传的 PDF 的大小。 10 个最佳免费 PDF 压缩工具软件 在这种情况下&#xff0c;您将需要一个可以为您减小 PDF 文件大小的应用程序。P…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

OpenLayers 分屏对比(地图联动)

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

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...