多平台屏幕江湖生存指南
UniApp 屏幕适配大师:多平台屏幕江湖生存指南
屏幕江湖:尺寸混战
屏幕适配就像是应对不同体型的客人:从迷你的手机屏,到标准的平板,再到巨大的电视屏幕,你的应用必须有如武林高手般的适应力。
┌──────────────────────────────────────────────────────┐
│ 【屏幕适配挑战的本质】 │
├──────────────┬───────────────────────────────────────┤
│ 像素密度不同 │ iPhone 13 Pro: 460ppi vs 普通安卓: 300ppi │
├──────────────┼───────────────────────────────────────┤
│ 屏幕比例不同 │ 16:9, 18:9, 4:3, 甚至折叠屏的动态比例 │
├──────────────┼───────────────────────────────────────┤
│ 渲染差异 │ 小程序、H5、原生App的渲染机制各不相同 │
├──────────────┼───────────────────────────────────────┤
│ 操作模式不同 │ 触摸屏vs鼠标操作,交互尺寸需求不同 │
└──────────────┴───────────────────────────────────────┘
生活类比:多功能服装
想象UniApp的屏幕适配系统是一件神奇的"变形衣":
- 基础款式(核心布局)保持不变
- 面对高个子(长屏幕)时,自动拉长
- 面对胖人(宽屏幕)时,自动变宽
- 面对特殊体型(奇怪比例)时,智能调整关键部位
UniApp的屏幕适配三大武功
一、【像素统一】:rpx单位
rpx是UniApp的独门武功,以750像素宽度为基准动态计算:
/* rpx将自动在不同屏幕上缩放 */
.container {width: 700rpx; /* 接近全屏宽度 */height: 300rpx; /* 高度也会等比例缩放 */padding: 20rpx; /* 内边距同样会缩放 */border-radius: 10rpx; /* 圆角也自动适应 */
}
生活类比:魔法裁缝
rpx就像是一位魔法裁缝,给他一套按标准人体(750px宽)设计的服装样式:
- 对于"瘦小"的手机,他会等比例缩小每个尺寸
- 对于"高大"的平板,他会等比例放大每个尺寸
- 裁缝不需要知道具体尺寸,只需按比例工作
┌──────────────────────────────────────────────────────┐
│ 【rpx单位计算流程图】 │
│ │
│ ┌───────────┐ ┌───────────────┐ │
│ │设计稿尺寸 │ │实际设备宽度 │ │
│ │(通常750px)│ │(如375px) │ │
│ └─────┬─────┘ └───────┬───────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌───────────────────────────────────┐ │
│ │ 计算比例因子 │ │
│ │ 实际设备宽度/设计稿宽度=0.5 │ │
│ └──────────────────┬────────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────────────┐ │
│ │ rpx到px的转换 │ │
│ │ 100rpx × 0.5 = 50px (在该设备上) │ │
│ └───────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────┘
二、【弹性布局】:Flex布局
Flex布局是适配各种屏幕尺寸的绝世神功:
.adaptive-container {display: flex;flex-direction: column; /* 控制主轴方向 */justify-content: space-between; /* 主轴对齐方式 */align-items: center; /* 交叉轴对齐方式 */
}.responsive-item {flex: 1; /* 可伸缩,占用所有可用空间 */width: 100%; /* 宽度100% */max-width: 600rpx; /* 最大宽度限制 */
}
生活类比:水流智能填充
Flex布局像水一样流动填满容器:
- 水会自动填满任何形状的容器 (flex元素填满可用空间)
- 可以控制水流方向 (flex-direction)
- 可以控制水量分配 (flex-grow, flex-shrink)
- 可以设置水坝限制 (max-width, min-height)
三、【比例适应】:媒体查询与条件编译
针对特定屏幕尺寸进行定制处理:
/* CSS媒体查询适应不同屏幕 */
.content {padding: 20rpx;
}/* 窄屏手机特殊处理 */
@media screen and (max-width: 320px) {.content {padding: 10rpx;}
}/* 平板及以上设备优化布局 */
@media screen and (min-width: 768px) {.content {padding: 40rpx;display: flex;}
}
条件编译处理平台差异:
<template><view class="container"><!-- #ifdef H5 --><view class="web-optimized-layout">网页优化布局</view><!-- #endif --><!-- #ifdef MP-WEIXIN --><view class="wechat-optimized-layout">微信小程序优化布局</view><!-- #endif --><!-- #ifdef APP-PLUS --><view class="app-optimized-layout">App优化布局</view><!-- #endif --></view>
</template>
生活类比:智能家具
媒体查询和条件编译像智能家具:
- 智能家具可以感知房间大小 (媒体查询检测屏幕尺寸)
- 根据房间类型变形 (条件编译针对不同平台)
- 小房间时收缩 (小屏幕优化)
- 大房间时展开更多功能 (大屏幕增强功能)
实战案例:全能型产品卡片
代码示例:自适应产品卡片
<template><view class="product-card"><view class="card-media"><image class="product-image" :src="product.image" mode="aspectFill"></image><view class="discount-badge" v-if="product.discount">-{{ product.discount }}%</view></view><view class="card-content"><text class="product-title">{{ product.title }}</text><!-- 响应式布局:价格区块 --><view class="price-container"><text class="current-price">¥{{ product.price }}</text><text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text></view><!-- 平板及桌面端显示更多信息 --><!-- #ifdef H5 || APP-PLUS --><view class="extra-info" v-if="isWideScreen"><text class="description">{{ product.description }}</text><view class="specs"><text v-for="(spec, index) in product.specifications" :key="index" class="spec-item">{{ spec }}</text></view></view><!-- #endif --><!-- 响应式操作按钮区 --><view class="action-area"><button class="add-to-cart-btn">加入购物车</button><!-- 宽屏幕显示更多按钮 --><button class="buy-now-btn" v-if="isWideScreen">立即购买</button><!-- 窄屏使用图标按钮节省空间 --><button class="fav-btn" v-if="!isWideScreen">❤</button></view></view></view>
</template><script>
export default {props: {product: {type: Object,required: true}},data() {return {screenWidth: 0,isWideScreen: false}},created() {// 获取设备信息const info = uni.getSystemInfoSync();this.screenWidth = info.screenWidth;// 判断是否宽屏this.isWideScreen = this.screenWidth >= 480;// 监听屏幕旋转(主要用于App和H5)// #ifdef APP-PLUS || H5uni.onWindowResize((res) => {this.screenWidth = res.size.windowWidth;this.isWideScreen = this.screenWidth >= 480;});// #endif}
}
</script><style>
.product-card {/* 使用rpx单位自适应不同屏幕 */width: 710rpx;margin: 20rpx;border-radius: 16rpx;box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);background-color: #ffffff;overflow: hidden;
}/* 媒体内容区 */
.card-media {position: relative;width: 100%;height: 350rpx;
}.product-image {width: 100%;height: 100%;
}.discount-badge {position: absolute;top: 20rpx;right: 20rpx;background-color: #ff4d4f;color: white;padding: 10rpx 16rpx;border-radius: 8rpx;font-size: 24rpx;font-wei
相关文章:
多平台屏幕江湖生存指南
UniApp 屏幕适配大师:多平台屏幕江湖生存指南 屏幕江湖:尺寸混战 屏幕适配就像是应对不同体型的客人:从迷你的手机屏,到标准的平板,再到巨大的电视屏幕,你的应用必须有如武林高手般的适应力。 ┌──────────────────────────────────…...
BootCDN介绍(Bootstrap主导的前端开源项目免费CDN加速服务)
文章目录 BootCDN前端开源项目CDN加速服务全解析什么是BootCDN技术原理与架构CDN技术基础BootCDN架构特点1. 全球分布式节点网络2. 智能DNS解析系统3. 高效缓存管理机制4. 自动同步更新机制5. HTTPS和HTTP/2协议支持 BootCDN的核心优势速度与稳定性开源免费资源丰富度技术规范遵…...
LeetCode 153. 寻找旋转排序数组中的最小值:二分查找法详解及高频疑问解析
文章目录 问题描述算法思路:二分查找法关键步骤 代码实现代码解释高频疑问解答1. 为什么循环条件是 left < right 而不是 left < right?2. 为什么比较 nums[mid] > nums[right] 而不是 nums[left] < nums[mid]?3. 为什么 right …...
刷leetcodehot100返航版--二叉树
二叉树理论基础 二叉树的种类 满二叉树和完全二叉树,二叉树搜索树 满二叉树 如果一棵二叉树只有度为0的结点和度为2的结点,并且度为0的结点在同一层上,则这棵二叉树为满二叉树。 节点个数2^n-1【n为树的深度】 完全二叉树 在完全二叉树…...
「Mac畅玩AIGC与多模态41」开发篇36 - 用 ArkTS 构建聚合搜索前端页面
一、概述 本篇基于上一节 Python 实现的双通道搜索服务(聚合 SearxNG 本地知识库),构建一个完整的 HarmonyOS ArkTS 前端页面。用户可在输入框中输入关键词,实时查询本地服务 http://localhost:5001/search?q...,返…...
【LINUX操作系统】生产者消费者模型(下):封装、信号量与环形队列
1.封装、完善基于阻塞队列的productor-consumer module 前文中我们封装了自己的Mutex 【LINUX操作系统】线程同步与互斥-CSDN博客 按照老规矩,现在我们对同步与互斥的理解更进一步了,现在把这种面向过程的语言封装成面向对象的写法 1.1 封装条件变量 #p…...
项目管理学习-CSPM-4考试总结
前言 经过两个月左右时间的学习,今天(2025年5月17日)参加了CSPM-4的考试,仿佛回到了2011年参加软考高项的时候。中午12点考完出来后,手都是酸酸的。不过整体感觉还可以,和预想的差不多。CSPM-4的考试一共有…...
自己手写tomcat项目
一:Servlet的原理 在Servlet(接口中)有: 1.init():初始化servlet 2.getServletConfig():获取当前servlet的配置信息 3.service():服务器(在HttpServlet中实现,目的是为了更好的匹配http的请求方式) 4.g…...
C语言—再学习(结构体)
一、建立结构体 用户自己建立由不同类型数据组成的组合型的数据结构,它称为结构体。 struct Student { int num; //学号char name[20]; //名字为字符串char sex; //性别int age; //年纪float score; //分数char addr[30]; 地址为字符…...
SpringBoot--自动配置原理详解
为什么要学习自动配置原理? 原因:在实际开发中,我们经常会定义一些公共的组件,提供各个团队来使用,为了使用方便,我们经常会将公共的组件自定义成starter,如果想自定义starter,必须…...
MiInsertPageInFreeList函数分析和MmFreePagesByColor数组的关系
第一部分: Color MI_GET_COLOR_FROM_LIST_ENTRY(PageFrameIndex, Pfn1); ColorHead &MmFreePagesByColor[ListName][Color]; 第二部分: #define MI_GET_COLOR_FROM_LIST_ENTRY(index,pfn) \ ((ULONG)(((pfn)->…...
Windows/MacOS WebStorm/IDEA 中开发 Uni-App 配置
文章目录 前言1. 安装 HBuilder X2. WebStorm/IDEA 安装 Uniapp Tool 插件3. 配置 Uniapp Tool 插件4. 运行 Uni-App 项目 前言 前端开发人员对 WebStorm 一定不陌生,但有时需要开发 Uni-App 的需求,就必须要采用 HBuilder X,如果不习惯 HBu…...
redisson分布式锁实现原理归纳总结
Redisson 分布式锁的实现原理主要依赖于 Redis 的 Hash 数据结构、Lua 脚本、发布订阅机制以及看门狗(Watchdog)机制,以下是核心要点总结: 1. 核心原理 • 互斥性与可重入性: 通过 Redis 的 Hash 数据结构保存锁的持…...
Ubuntu 添加系统调用
实验内容 通过内核编译法添加一个不用传递参数的系统调用,其功能可自定义。 (1)添加系统调用号,系统会根据这个号找到syscall_table中的相应表项。具体做法是在syscall_64.tbl文件中添加系统调用号和调用函数的对应关系。 &#…...
Olib 2.2.0 | 免费开源软件,无需注册登录即可从ZLibrary下载多语言电子书
Olib是一款专为书籍爱好者设计的免费开源软件,它允许用户无需注册或登录即可从ZLibrary高速下载各种语言的电子书。该软件支持上百种语言的电子书下载,非常适合需要多语言资源的读者和研究人员使用。Olib的操作界面非常直观,使得书籍的搜索与…...
c++动态链接库
1. 生成动态链接库 首先实现一个动态链接库的代码 // example.cpp #include <iostream> void sayHello() {std::cout << "Hello from shared library!" << std::endl; }int add(int a, int b) {return a b; }// example.h #pragma once void sa…...
HelloWorld
HelloWorld 新建一个java文件 文件后缀名为 .javahello.java【注意】系统可能没有显示文件后缀名,我们需要手动打开 编写代码 public class hello {public static void main(String[] args) {System.out.print(Hello,World)} }编译 javac java文件,会生…...
SVGPlay:一次 CodeBuddy 主动构建的动画工具之旅
我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 背景与想法 我一直对 SVG 图标的动画处理有浓厚兴趣,特别是描边、渐变、交互等效果能为图标增添许…...
SLAM定位常用地图对比示例
序号 地图类型 概述 1 格栅地图 将现实环境栅格化,每一个栅格用 0 和 1 分别表示空闲和占据状态,初始化为未知状态 0.5 2 特征地图 以点、线、面等几何特征来描绘周围环境,将采集的信息进行筛选和提取得到关键几何特征 3 拓扑地图 将重要部分抽象为地图,使用简单的图形表示…...
强化学习中,frames(帧)和 episodes(回合)
在强化学习中,frames(帧)和 episodes(回合)是两个不同的概念: 1. 定义差异 Frame(帧): 表示智能体与环境交互的单个时间步(step),例如…...
HCIP第六次作业
一、拓扑图 二、需求 1、使用PreVal策略,确保R4通过R2到达192.168.10.0/24 2、使用AS_Path策略,确保R4通过R3到达192.168.11.0/24 3、配置MED策略,确保R4通过R3到达192.168.12.0/24 4、使用Local Preference策略,确保R1通过R2…...
高频面试题(含笔试高频算法整理)基本总结回顾110
干货分享,感谢您的阅读! (暂存篇---后续会删除,完整版和持续更新见高频面试题基本总结回顾(含笔试高频算法整理)) 备注:引用请标注出处,同时存在的问题请在相关博客留言…...
数据湖与数据仓库融合:Hudi、Iceberg、Delta Lake 实践对比
在实时与离线一体化的今天,数据湖与数据仓库边界不断融合,越来越多企业选用如 Hudi、Iceberg、Delta Lake 等开源方案实现统一的数据存储、计算、分析平台。本篇将围绕以下关键点,展开实战对比与解决方案分享: ✅ 实时写入能力 ✅ ACID 保证 ✅ 增量数据处理能力 ✅ 流批一…...
OGG 更新表频繁导致进程中断,见鬼了?非也!
大家好,这里是 DBA学习之路,专注于提升数据库运维效率。 目录 前言问题描述问题分析解决方案后续 前言 最近几周一直遇到一个 OGG 问题,有一张表已更新就会中断 OGG 同步进程,本文记录一下分析过程以及解决方案。 问题描述 昨天…...
C++学习-入门到精通-【7】类的深入剖析
C学习-入门到精通-【7】类的深入剖析 类的深入剖析 C学习-入门到精通-【7】类的深入剖析一、Time类的实例研究二、组成和继承三、类的作用域和类成员的访问类作用域和块作用域圆点成员选择运算符(.)和箭头成员选择运算符(->)访问函数和工具函数 四、具有默认实参的构造函数重…...
非易失性存储技术综合对比:EEPROM、NVRAM、NOR Flash、NAND Flash和SD卡
非易失性存储技术综合对比:EEPROM、NVRAM、NOR Flash、NAND Flash和SD卡 读写性能对比 存储类型读取速度写入速度随机访问能力最小操作单位NVRAM极快(~10ns)极快(~10ns)极优(字节级)字节EEPROM中等(~100ns)慢(~5ms/字节)优(字节级)字节NOR Flash快(~50ns)慢(~5ms/…...
数字化转型- 数字化转型路线和推进
数字化转型三个阶段 百度百科给出的企业的数字化转型包括信息化、数字化、数智化三个阶段 信息化是将企业在生产经营过程中产生的业务信息进行记录、储存和管理,通过电子终端呈现,便于信息的传播与沟通。数字化通过打通各个系统的互联互通,…...
ARM (Attention Refinement Module)
ARM模块【来源于BiSeNet】:细化特征图的注意力,增强重要特征并抑制不重要的特征。 Attention Refinement Module (ARM) 详解 ARM (Attention Refinement Module) 是 BiSeNet 中用于增强特征表示的关键模块,它通过注意力机制来细化特征图&…...
符合Python风格的对象(对象表示形式)
对象表示形式 每门面向对象的语言至少都有一种获取对象的字符串表示形式的标准方 式。Python 提供了两种方式。 repr() 以便于开发者理解的方式返回对象的字符串表示形式。str() 以便于用户理解的方式返回对象的字符串表示形式。 正如你所知,我们要实现_…...
AtCoder AT_abc406_c [ABC406C] ~
前言 除了 A 题,唯一一道一遍过的题。 题目大意 我们定义满足以下所有条件的一个长度为 N N N 的序列 A ( A 1 , A 2 , … , A N ) A(A_1,A_2,\dots,A_N) A(A1,A2,…,AN) 为波浪序列: N ≥ 4 N\ge4 N≥4(其实满足后面就必须满足这…...
多指标组合策略
该策略(MultiConditionStrategy)是一种基于多种技术指标和市场条件的交易策略。它通过综合考虑多个条件来生成交易信号,从而决定买入或卖出的时机。 以下是对该策略的详细分析: 交易逻辑思路 1. 条件1:星期几和价格变化判断 - 该条件根据当前日期是星期几以及价格的变化…...
系统架构-大数据架构设计
基础介绍 三大挑战: 如何处理非结构化和半结构化数据如何探索大数据复杂性、不确定性特征描述的刻画方法及大数据的系统建模数据异构性与决策异构性的关系对大数据知识发现与管理决策的影响 架构特征: 鲁棒性(稳定性)和容错性…...
R语言空间数据处理入门教程
我的课程《R语言空间数据处理入门教程》已重新恢复课程售卖,有需要的读者可以学习。 👇点击下方链接(文末“阅读原文”可直达),立即开启你的空间数据之旅: https://www.bilibili.com/cheese/play/ss13775…...
QT+EtherCAT 主站协议库—SOEM主站
SOEM 是 Simple Open EtherCAT Master Library 的缩写,是瑞典 rt-lab 提供 的一个开源 EtherCAT 主站协议库 。 SOEM 库使用 C 语言编写,可以在 windows 以及 Linux 平台上运行,并也可以方便地移植到嵌入式平台上。 SOEM 支持 CoE ࿰…...
Java-反射(Reflection)
一:概述 (1)出现背景 (2)解决方案 (3)使用场景 业务开发用的少,框架使用的多,业务反射被认为是动态语言的关键 (4)与原方法对比 (5…...
第一次经历项目上线
这几天没写csdn,因为忙着项目上线的问题,我这阶段改了非常多的前端bug哈哈哈哈,说几个比较好的bug思想! 这个页面算是我遇到的比较大的bug,因为我一开始的逻辑都写好了,询价就是在点击快递公司弹出弹框的时…...
基于C#的MQTT通信实战:从EMQX搭建到发布订阅全解析
MQTT(Message Queueing Telemetry Transport) 消息队列遥测传输,在物联网领域应用的很广泛,它是基于Publish/Subscribe模式,具有简单易用,支持QoS,传输效率高的特点。 它被设计用于低带宽,不稳定或高延迟的…...
DeepSeek超大模型的高效训练策略
算力挑战 训练DeepSeek此类千亿乃至万亿级别参数模型,对算力资源提出了极高要求。以DeepSeek-V3为例,其基础模型参数量为67亿,采用专家混合(MoE)架构后实际激活参数可达几百亿。如此规模的模型远超单张GPU显存容量极限,必须借助分布式并行才能加载和训练。具体挑战主要包…...
【论文阅读】人脸修复(face restoration ) 不同先验代表算法整理
转眼做人脸复原(face restoration)算法也一段时间了,根据自己的记忆整理一下自己的一些看法,算作个人记录,当然如果有人愿意分享自己的看法也是极好的。先挂下文章链接,下一篇在写总结。 一、前述 人脸修复(face restoration)任…...
最小二乘法拟合平面(线性回归法、梯度下降、PCA法)
参考笔记: Open3D 最小二乘拟合平面(直接求解法)【2025最新版】_python open3d已知平面方程绘制平面-CSDN博客 目录 1.前言 2.线性回归法 2.1 模型假设 2.2 定义误差函数 2.3 求偏导并解方程 2.4 解方程 2.5 案例演示 2.5.1 手工计…...
数组名既可作为指针也可作为变量名
在C语言中,数组名在不同的上下文中既可以作为指向数组首个元素的指针,也可以代表整个数组,这是由C语言的设计和语法规则决定的,下面我来详细解释一下。 1. 数组名作为指向首元素的指针 在大多数情况下,当数组名出现在…...
MySQL相关
1.多表查询关键点在哪 📖 1️⃣ 明确关联关系 先搞清楚多表之间的关联关系: 一对一(1:1) 一对多(1:N) 多对多(M:N) 比如: 一个课程对应一个教室(1:1&am…...
Axure制作可视化大屏动态滚动列表教程
在可视化大屏设计中,动态滚动列表是一种常见且实用的展示方式,能够有效地展示大量信息。本文将详细介绍如何使用Axure制作一个动态滚动的列表展示模块。 一、准备工作 打开Axure软件:确保你已经安装并打开了Axure RP软件。创建新项目&#x…...
计算机网络(1)——概述
1.计算机网络基本概念 1.1 什么是计算机网络 计算机网络的产生背景 在计算机网络出现之前,计算机之间都是相互独立的,每台计算机只能访问自身存储的数据,无法与其他计算机进行数据交换和资源共享。这种独立的计算机系统存在诸多局限性&#…...
融智学视域下的系统性认知增强框架——基于文理工三类AI助理赋能HI四阶跃迁路径
融智学视域下的系统性认知增强框架 ——基于文理工三类AI助理赋能HI四阶跃迁路径 一、如何排除50个认知偏差:消除50类偏差的精准矫正系统 1. 技术架构 文科AI: 构建文化语义场(Cultural Semantic Field, CSF),通过…...
C++ - 仿 RabbitMQ 实现消息队列(2)(Protobuf 和 Muduo 初识)
C - 仿 RabbitMQ 实现消息队列(2)(Protobuf 和 Muduo 初识) Protobuf1. 序列化/反序列化方法(最核心)_InternalSerialize()_InternalParse() 2. 内存管理方法SharedCtor()/SharedDtor()InternalSwap() 3. 字…...
FTP与NFS服务实战:从配置到应用
一、FTP服务进阶:客户端工具与访问控制 1. FTP客户端工具对比 在Linux中,ftp和lftp是常用的FTP客户端工具,功能各有侧重: 工具特点适用场景ftp基础命令交互,需手动输入用户名/密码简单文件传输lftp支持多协议、批量…...
高考AI试题查询系统
高考AI试题查询系统 gitee:https://gitee.com/ltyyyds26/GaoKao_AI 数据 来源:OpenLMLab/GAOKAO-Bench: GAOKAO-Bench is an evaluation framework that utilizes GAOKAO questions as a dataset to evaluate large language models. (github.com) 数…...
记录算法笔记(2025.5.17)验证二叉搜索树
给你一个二叉树的根节点 root ,判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下: 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 示例 1: 输入&…...
DataX:一个开源的离线数据同步工具
DataX 是一个异构数据源离线同步(ETL)工具,实现了包括关系型数据库(MySQL、Oracle 等)、HDFS、Hive、ODPS、HBase、FTP 等各种异构数据源之间稳定高效的数据同步功能。它也是阿里云 DataWorks 数据集成功能的开源版本。 为了解决异构数据源同…...