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

vue项目页面适配

news 来源：原创 2025/6/10 5:48:45

vue项目页面适配

目的：结合动态设置根字体大小的脚本（如通过 JavaScript 监听屏幕尺寸变化），实现页面元素在不同设备上的自适应缩放

1、安装postcss-pxtorem

### 若项目未集成 postcss，需同步安装：
npm install postcss postcss-pxtorem@5.1.1 --save-dev  ### 单独安装postcss-pxtorem：
npm install postcss-pxtorem --save-dev  	# 适用于最新版本兼容的项目
npm install postcss-pxtorem@5.1.1 --save-dev  	# 适用于指定版本安装

2、添加rem.js

rem 单位特性‌：1rem 等于根元素的字体大小，通过调整根字体值（如 32px → 64px），所有使用 rem 的元素按比例放大/缩小12。
‌自动化流程‌：在构建阶段（如 Webpack/Vite），插件自动扫描 CSS 文件并完成 px → rem 转换，减少手动计算成本

const baseSize = 14;function setRem() {const scale = document.documentElement.clientWidth / 750;document.documentElement.style.fontSize =baseSize * Math.min(scale, 1.2) + "px";
}setRem();
window.onresize = function() {setRem();
}

3、在main.js中添加文件引用

import "./config/rem";

4、在vite.config.js中添加postcss-pxtorem

import postCssPxToRem from 'postcss-pxtorem'~~~css:{postcss:{plugins:[postCssPxToRem({rootValue:14,propList:['*'],})]
}

5、居中适配

在style.css中添加：

body {padding: 0;margin: 0px auto;max-width: 750px;background-color: #6D24A2;
}

vue项目页面适配

vue项目页面适配目的：结合动态设置根字体大小的脚本（如通过 JavaScript 监听屏幕尺寸变化），实现页面元素在不同设备上的自适应缩放 1、安装postcss-pxtorem ### 若项目未集成 postcss，需同步安装： npm …...

编程日记 2025/6/1 13:08:25

AI-Browser适用于 ChatGPT、Gemini、Claude、DeepSeek、Grok的客户端开源应用程序，集成了 Monaco 编辑器。

一、软件介绍文末提供程序和源码下载学习 AI-Browser适用于 ChatGPT、Gemini、Claude、DeepSeek、Grok、Felo、Cody、JENOVA、Phind、Perplexity、Genspark 和 Google AI Studio 的客户端应用程序，集成了 Monaco 编辑器。使用 Electron 构建的强大桌面应用程序&a…...

编程日记 2025/5/27 6:13:09

Flutter Dart新特性NulI safety late 关键字、空类型声明符?、非空断言!、required 关键字

目录 late 关键字 required关键词: 常用的Model对象使用required Null safety翻译成中文的意思是空安全 null safety 可以帮助开发者避免一些日常开发中很难被发现的错误，并且额外的好处是可以改善性能后的版本都要求使用nul1 safety。Flutter2.2.0(2021年5月19日…...

编程日记 2025/5/25 8:40:25

CF2096G Wonderful Guessing Game 构造

题解首先考虑没有 ? ? ? 回答的时候，答案是多少。猜猜需要多少个询问。 ⌈ log ⁡ 2 n ⌉ ? ⌈ log ⁡ 3 n ⌉ ? \lceil \log_2n\rceil ? \lceil \log_3n\rceil ? ⌈log2n⌉?⌈log3n⌉? 可以构造一个表，行表示不同的询问，…...

编程日记 2025/5/29 9:19:23

制作一款打飞机游戏26：精灵编辑器

虽然我们基本上已经重建了Axel编辑器，但我不想直接使用它。我想创建一个真正适合我们当前目的的编辑器，那就是编辑精灵（sprites）。这将是今天的一个大目标——创建一个基于模板的编辑器，用它作为我们实际编辑器的起点。…...

编程日记 2025/5/28 10:37:02

深入Java JVM常见问题及解决方案

1. 简介 Java虚拟机（JVM）是Java程序运行的核心环境，但其复杂性可能导致内存泄漏、性能下降、类加载失败等问题。本文从内存管理、垃圾回收、性能调优、异常处理四大方向，结合工具使用与实战案例，详解JVM问题的排查与解…...

编程日记 2025/5/24 16:26:53

【MySQL】Java代码操作MySQL数据库 —— JDBC编程

目录 1. Java的JDBC编程 1.1 Java的数据库编程：JDBC 1.2 JDBC工作原理 1.3 如何在项目中导入数据库驱动包如何下载数据库驱动包 jar包如何引入项目中 2. 编写JDBC代码 1. 创建并初始化一个数据源(DataSource) 2. 和数据库服务器建立连接 3. 构造 SQL 语句…...

编程日记 2025/5/29 9:59:51

Marmoset Toolbag 5.0 中文汉化版八猴软件中文汉化版免费下载

八猴安装包下载链接 https://pan.baidu.com/s/1Mgy3Mrlrb3Tvtc8w7Zn1nA?pwd6666 提取码：6666 Marmoset Toolbag是由Monkey公司推出一款专业动画渲染软件，也叫做八猴渲染器。该软件主要特征功能是可以进行实时模型观察、材质编辑和动画预览，…...

编程日记 2025/4/28 7:19:50

Java编程中常见错误的总结和解决方法

1. 找不到文件问题描述：尝试编译一个名为ChangeCha.java的文件，但编译器找不到这个文件。错误信息：javac: 找不到文件: ChangeCha.java解决方法：检查文件名是否正确，文件是否存在于当前目录，或者路径是否…...

编程日记 2025/4/28 7:17:39

【GESP】C++三级练习 luogu-B2114 配对碱基链

GESP三级练习，字符串练习（C三级大纲中6号知识点，字符串），难度★✮☆☆☆。题目题解详见：https://www.coderli.com/gesp-3-luogu-b2114/ 【GESP】C三级练习 luogu-B2114 配对碱基链 | OneCoderGESP三级练…...

编程日记 2025/4/28 7:16:35

C++类设计新思路：封装结构体成员变量

C++类设计新思路：封装结构体成员变量引言在C++编程里，类是封装数据和行为的重要手段。常规的类设计直接把成员变量定义在类中，再通过成员函数访问和修改这些变量。不过，有时候我们可以采用不同的设计思路，例如将成员变量封装到结构体里，这样可能会带来一些好处。本文…...

编程日记 2025/4/28 7:16:33

图像预处理-形态学变换

针对二值化图像，其有两个输入，一个输出：输入为原图像、核（结构化元素），输出为形态学变换后的图像。基本操作有腐蚀和膨胀。一.核联想到之前的卷积核，也是一种核。此时的核就跟卷积核不太一…...

编程日记 2025/4/28 7:16:30

关于百度模型迭代个人见解：技术竞速下的应用价值守恒定律

就在前天，在 2025 年 4 月 25 日的百度 Create 开发者大会上，文心大模型 4.5 Turbo 与 X1 Turbo 的发布再次将 AI 行业带入 "涡轮加速" 时代。这两款模型不仅在多模态理解、逻辑推理等核心指标上实现突破，更以80% 的价格降幅重塑行…...

编程日记 2025/4/28 7:15:29

从基础到实战的量化交易全流程学习：1.3 数学与统计学基础——概率与统计基础 | 基础概念

从基础到实战的量化交易全流程学习：1.3 数学与统计学基础——概率与统计基础 | 基础概念第一部分：概率与统计基础第1节：基础概念：随机变量、概率分布、大数定律与中心极限定理一、随机变量与概率分布：用数学描述市场…...

编程日记 2025/5/31 15:56:21

混沌工程领域常用工具的对比分析

以下是混沌工程领域常用工具的对比分析，涵盖主流工具的核心功能、优势、适用场景及局限性，帮助技术团队根据自身需求选择合适的工具：一、故障注入工具对比工具核心特点优势适用场景局限性生态集成开源/付费Chaos MonkeyNetflix 开源，随机终止生产环境实例，模拟硬件/进程…...

编程日记 2025/4/28 7:15:24

LINUX的使用（2）- 安装软件

0.防火墙相关启动防火墙： sudo systemctl start firewalld #查看防火墙列表 firewall-cmd --list-ports 设置防火墙开机自启： sudo systemctl enable firewalld 检查防火墙状态： sudo firewall-cmd --state 允许某个端口（如端…...

编程日记 2025/4/28 7:14:20

一主多从+自组网络，无线模拟量信号传输专治布线PTSD

无线模拟量信号传输模块通过无线方式实现模拟量信号的传输，采集工业现场标准4~20mA电流信号，并将其转换为无线信号进行传输。以下是关于无线模拟量信号传输模块实现无线模拟量信号传输的详细介绍： 一、模块原理无线模拟量信号传输模块的…...

编程日记 2025/5/24 7:34:15

IDEA中使用Git

Git工作流程创建远程仓库现在我们已经在本地创建了一个Git仓库，但是这只能满足我们单人开发，如果想要团队协作，还需要一个远程仓库目前比较流行的远程仓库，有下面这两个： github：https://github.com …...

编程日记 2025/4/28 7:14:18

Go RPC 服务方法签名的要求

在 Go 中，RPC 方法的签名有严格的要求，主要是为了保证方法的调用能够通过网络正确地传输和解析。具体要求如下： 1. 方法必须是导出的 RPC 服务的方法必须是导出的（即首字母大写）。这是因为 Go 的反射机制要求服务方法…...

编程日记 2025/4/28 7:13:11

Ant（Ubuntu 18.04.6 LTS）安装笔记

一、前言本文与【MySQL 8（Ubuntu 18.04.6 LTS）安装笔记】同批次：先搭建数据库，再安装JDK，后面肯定就是部署Web应用。其中Web应用的部署使用 Ant 方式，善始善终，特以笔记。二、准备 &#xf…...

编程日记 2025/4/28 7:13:11

相机DreamCamera2录像模式适配尺寸

在开发中遇到一个问题，相机切换视频模式时，预览时，界面不能充满屏幕两侧有黑边，客户要求修改，在此记录一问题现象： 系统相机在视频模式下预览时如下现象如图1，期望现象如图2: 图1 …...

编程日记 2025/5/23 1:48:04

Animate 中HTMLCanvas 画布下实现拖拽、释放、吸附的拼图游戏

1.舞台上物体拖拽 2.松手以后，检查是否移动到范围内，是则自动吸附 3.播放音效 4.变量1，显示在舞台的动态文本中 1.实现拖拽下面代码实现拖拽和释放地图模块 //记录原始位置 var OriXthis.my_mc.x; var OriYthis.my_mc.y;this.my_mc.on(&q…...

编程日记 2025/4/28 7:13:06

第十一章-PHP表单传值

第十一章-PHP表单传值一，核心概念 1. 表单的基本结构（HTML） 通过HTML的<form>标签定义表单，关键属性包括： action: 指定处理表单数据的PHP脚本路径（如action"process.php"&#xff09…...

编程日记 2025/4/28 7:12:04

互联网大厂Java求职面试：从Java核心到微服务的深度探索

场景引入：在一个阳光明媚的早上，谢飞机满怀信心地走进了一家知名互联网大厂的面试房间。面试官坐在桌子的另一端，手中拿着一份简历，面带微笑地开始了今天的面试。第一轮提问：核心语言与平台面试官： "谢飞机，你好。我看到你熟悉Java SE，能不能简单介绍一下Ja…...

编程日记 2025/5/31 0:30:07

微服务即时通信系统（十二）---入口网关子服务

目录功能设计模块划分业务接口/功能示意图服务实现流程网关HTTP接口网关WebSocket接口总体流程服务代码实现客户端长连接管理封装（connectionManage.hpp） proto文件的编写身份鉴权proto 事件通知proto 各项请求的URL的确定服务端完成入口网关服务类…...

编程日记 2025/5/23 21:36:10

ES练习册

es索引结构和数据实例这里提供索引结构和数据实例提供给大家使用练习，希望大家能够一起成长进步~~~~ #添加索引 PUT /ecommerce_products {"settings": {"number_of_shards": 3,"number_of_replicas": 1,"analysis": {&…...

编程日记 2025/4/28 7:12:02

运算符分为哪几类？哪些运算符常用作判断？简述运算符的优先级

运算符主要分为以下几类‌： ‌算术运算符‌：用于执行基本的数学运算，如加、减、乘、除、取模等。例如：、-、*、/、%‌。‌赋值运算符‌：用于将值赋给变量。例如：、、-、*、/、%‌。‌比较运算符‌&#xff…...

编程日记 2025/5/22 19:58:54

shell编程基础知识及脚本示例

文章目录前言一、shell变量1.命名规则2.定义及使用变量二、shell传递参数1.位置参数2. 任意参数三、shell一维数组0.定义方式1.定义并获取数组的单个元素2.定义并获取数组的所有元素3.定义并获取数组的元素个数4.定义并获取数组的元素索引四、shell条件判断语法五、shell常…...

编程日记 2025/6/2 11:07:01

再学GPIO（一）

GPIO输出模式 STM32的GPIO（General Purpose Input Output 通用输入输出）引脚支持多种输出模式，不同模式决定了引脚的驱动能力和信号特性。STM32的GPIO输出模式主要分为以下4种： 推挽输出（Push-Pull Output）…...

编程日记 2025/4/28 7:10:51

OpenCV彩色图像分割

OpenCV计算机视觉开发实践：基于Qt C - 商品搜索 - 京东灰度图像大多通过算子寻找边缘和区域生长融合来分割图像。彩色图像增加了色彩信息，可以通过不同的色彩值来分割图像，常用彩色空间HSV/HIS、RGB、LAB等都可以用于分割。本节使用inRange…...

编程日记 2025/4/28 7:09:49

django filter 排除字段

在Django中，当你使用filter查询集（QuerySet）时，通常你会根据模型的字段来过滤数据。但是，有时你可能想要排除某些特定的字段，而不是过滤这些字段。这里有几种方法可以实现这一点： 使用exclude方…...

编程日记 2025/4/28 7:09:48

CAT: Enhancing Multimodal Large Language Model to Answer Questions in Dynamic Audio-Visual Scenarios ➡️ 论文标题：CAT: Enhancing Multimodal Large Language Model to Answer Questions in Dynamic Audio-Visual Scenarios ➡️ 论文作者：Qil…...

编程日记 2025/4/28 7:09:46

Vue3 通过Vue3-Print-Nb在线工单打印模板打印自定义打印打印下载

介绍通过在应用中集成打印功能，用户可以直接从页面打印工单，不用导出文件或使用其他外部工具。节省时间，提高效率，特别是当需要大量打印时。同时也可以将文件模板上传到数据库，提供给部门工作自行下载。开源文档&am…...

编程日记 2025/5/23 23:48:03

视觉“解锁”触觉操控：Franka机器人如何玩转刚柔物体？

集智联机器人（Plug & Play Robotics），简称PNP机器人，是Franka Robotics和思灵机器人金牌合作伙伴，集智联机器人团队成员均来自于国内外机器人行业知名企业，具有较强的学术背景。PNP机器人致力于为客户提…...

编程日记 2025/4/28 7:08:43

FlinkUpsertKafka深度解析

1. 设计目标与工作机制 Upsert-Kafka Connector 核心功能：支持以 Upsert（插入/更新/删除） 模式读写 Kafka 数据，适用于需要动态更新结果的场景（如聚合统计、CDC 数据同步）。数据流类型： 作为 …...

编程日记 2025/6/3 3:14:49

百度Create大会深度解读：AI Agent与多模态模型如何重塑未来？

目录百度Create大会亮点全解析：从数字人到Agent生态布局数字人商业化：从"拟人"到"高说服力"的进化 Agent生态：从"心响"App看百度的Agent战略布局 "心响"App的技术架构与创新点多模态大模型&a…...

编程日记 2025/4/28 7:07:34

新能源汽车运动控制器核心芯片选型与优化：MCU、DCDC与CANFD协同设计

摘要：随着新能源汽车产业的迅猛发展，汽车运动控制器的性能和可靠性面临着更高的要求。本文深入探讨了新能源汽车运动控制器中MCU（微控制单元）、DCDC电源管理芯片和CANFD总线通信芯片的选型要点、优化策略及其协同设计方案。通过综…...

编程日记 2025/4/28 7:07:30

【软件工程】白盒测试简介

1. 前言在软件测试过程中，白盒测试（White-box Testing）是一种重要方法，它通过检查程序内部结构来验证软件功能。本文以一道典型的伪代码程序为例，结合白盒测试的基本操作，设计语句覆盖测试用例&#xff0…...

编程日记 2025/5/13 16:29:45

uniapp自定义一个选择年月日时分的组件。

<template><view><u-popup :show"timePopShow" mode"bottom" close"close" open"open" :closeOnClickOverlay"true"><view class"popup-container"><vi…...

编程日记 2025/4/28 7:06:27

Git命令（Gitee）

三板斧： git init //初始化本地仓库 git add . //添加所有文件到缓存区 （或指定文件） git commit -m "备注" //提交，填写备注 git remote add origin <远程仓库链接> git push -u origin ma…...

编程日记 2025/6/1 7:24:49

Node.js 应用部署：镜像体积优化与安全的多阶段构建探索

Node.js 应用部署：镜像体积优化与安全的多阶段构建探索在开发 Node.js 应用时，部署过程中的镜像体积优化和安全性保障是至关重要的环节。本文将通过两种不同的 Docker 部署方式，深入探讨如何实现高效的镜像体积优化和安全的部署环境。传统的单阶段构建方式许多开发者在…...

编程日记 2025/4/28 7:05:22

深度解析：Web Crawling与Web Scraping的区别与联系

在现代互联网数据驱动的时代，Web Crawling(网页爬取)和Web Scraping(网页抓取)成为数据采集领域的两大核心技术。尽管两者常被混用，但它们在技术实现、应用目的和操作流程上存在显著差异。本文将基于权威资料，特别是维基百科的定义&#xff0…...

编程日记 2025/4/28 7:05:21

C# 利用log4net 工作台打印和保存到文件

目录 ‌log4net‌简介引言1、添加引用库2、添加引用和构建实例3、添加属性配置4、添加配置文件最后 ‌log4net‌简介 log4net‌是一个开源的日志记录组件，专为.NET平台设计。它是Apache log4j框架在Microsoft .NET平台的实现，属于Apache Logging Servic…...

编程日记 2025/5/27 12:43:25

2025 VSCode中如何进行dotnet开发环境配置完整教程

我一直都是用Visual Studio 2019来开发C#项目的，用的比较顺手，也习惯了。看其他技术文章有介绍VS Code更轻量，更方便。所以就想来研究如何使用VS Code，看看它是如何构建代码、调试代码、如何运行C#应用程序。本文将详细介绍如何…...

编程日记 2025/4/28 7:04:16

vscode本地化显示远程图形化界面

远程登陆到服务器端 sudo vim /etc/ssh/sshd_config修改文件中的参数，保存。主要参数如下配置好上述后需要reload一下ssh,安装xclock。 service ssh reload # 安装x11-apps，这样就可以使用xclock apt install x11-apps查看环境变量,在其中并没有DISPL…...

编程日记 2025/4/29 18:37:31

STM32 CAN通信 HAL库实战教程：从零到测试成功

STM32 CAN通信 HAL库实战教程：从零到测试成功 <我打印的是陀螺仪的数据> 目录简介：为什么学习CAN通信CAN通信基础概念STM32 CAN硬件配置CAN初始化详解CAN数据发送实现CAN数据接收实现测试与验证方法常见问题与解决总结与拓展 1. 简介&#xff1…...

编程日记 2025/4/28 7:04:15

数据结构强化篇

应用题排序插入排序 void InsertSort (ElemType A[], n int) {int i, j;for (i2; i<n; i) //依次将 A[2]～A[n]插入前面已排序序列if (A[i]<A[i-1]) { //若 A[i]关键码小于其前驱，将 A[i]插入有序表A[0]A[i]; //复制为哨兵，A[0]不存放…...

编程日记 2025/4/28 7:03:13