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

rpx和px混用方案


(1)创建一个全局的样式配置文件:

// styles/variables.scss
:root {// 基础字体大小--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 18px;// 响应式间距--spacing-xs: 5px;--spacing-sm: 10px;--spacing-md: 15px;--spacing-lg: 20px;
}// 在小屏设备上使用rpx
@media screen and (max-width: 768px) {:root {--font-size-xs: 24rpx;--font-size-sm: 28rpx;--font-size-md: 32rpx;--font-size-lg: 36rpx;--spacing-xs: 10rpx;--spacing-sm: 20rpx;--spacing-md: 30rpx;--spacing-lg: 40rpx;}
}


(2)使用

<template><view class="container"><text class="title">标题</text><text class="content">内容</text></view>
</template><style scoped>
.title {font-size: var(--font-size-lg);margin-bottom: var(--spacing-md);
}.content {font-size: var(--font-size-md);
}
</style>


(3)方案优点
i. 提供了统一的样式管理
ii. 易于维护和修改
iii. 可以根据不同设备自动适配
iv. 保持了代码的清晰和可读性

(4)注意事项
i. 在项目入口文件引入全局样式配置
ii. 根据实际设计规范调整具体的尺寸值
iii. 可以根据需要添加更多的断点和变量
iv. 考虑添加更多的设备类型判断(如平板、桌面等)


(5)为什么在小设备上使用rpx,在宽设备上使用px?
这是因为 rpx 和 px 在不同设备上的表现特点不同:
i. rpx 的特点: rpx 是微信小程序引入的响应式单位, 规则是屏幕宽度/750,即以&nbsp;750rpx为基准,在小屏手机上表现良好,因为大多数手机的设计稿都是以750px 为基准,但在大屏设备上会等比放大,导致内容过大。

ii. px的特点:
px是固定单位,不会随屏幕变化,在大屏设备上能保持合适的尺寸,但在小屏设备上可能显示过小


 

相关文章:

rpx和px混用方案

&#xff08;1&#xff09;创建一个全局的样式配置文件&#xff1a; // styles/variables.scss :root {// 基础字体大小--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 18px;// 响应式间距--spacing-xs: 5px;--spacing-sm: 10px;--spacing-…...

光伏设计软件分类:无人机、Unity3D引擎齐上阵

无人机3D设计 无人机可搭载高分辨率光学相机、激光雷达等测绘设备&#xff0c;对目标区域进行全方位、多角度的航拍作业。通过对采集到的影像数据进行导入处理&#xff0c;运用复杂的图像识别算法与三维重建技术&#xff0c;构建出云端实景3D模型&#xff0c;在实景3D模型中进…...

太速科技-616-基于6U VPX XCVU9P+XCZU7EV的双FMC信号处理板卡

基于6U VPX XCVU9PXCZU7EV的双FMC信号处理板卡 一、板卡概述 板卡基于6U VPX标准结构&#xff0c;包含一个XCVU9P 高性能FPGA&#xff0c;一片XCZU7EV FPGA&#xff0c;用于 IO扩展接口&#xff0c;双路HPC FMC扩展高速AD、DA、光纤接口等。是理想应用于高性能数字计算&…...

国产鲲鹏920+欧拉+达梦

1&#xff0c;访问达梦官网 产品下载-达梦数据 1.1&#xff0c;官网没有欧拉的版本&#xff1b; 1.2&#xff0c;拨打客服热线&#xff0c;联系售前单独获取试用版 2&#xff0c;创建鲲鹏920欧拉环境&#xff1a; 2.1&#xff0c;阿里云&#xff1a;没有arm系统 2.2&#xf…...

LeetCode--146. LRU 缓存【Golang中的list】

146. LRU 缓存 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c…...

查看notebook的jupyter token

如果你忘记了jupyter的token&#xff0c;那么你可以命令行登录后台&#xff0c;查看。 jupyter notebook list 把token复制下&#xff0c;贴到网站上即可。jupyter登录页已经提示了。...

vue+springboot+webtrc+websocket实现双人音视频通话会议

前言 最近一些时间我有研究&#xff0c;如何实现一个视频会议功能&#xff0c;但是找了好多资料都不太理想&#xff0c;最终参考了一个文章 WebRTC实现双端音视频聊天&#xff08;Vue3 SpringBoot&#xff09; 只不过&#xff0c;它的实现效果里面只会播放本地的mp4视频文件&…...

什么是高亮环形光源

高亮环形光源是一种常用于机器视觉、工业检测和光学测量的照明设备。其特点是光线均匀、亮度高,并且呈环形分布,能够为被检测物体提供均匀的照明,减少阴影和反光,提高图像采集的质量。 主要特点: 环形设计:光源呈环形分布,适合安装在镜头周围,能够为物体提供均匀的照明…...

2025年3月一区SCI-混沌进化优化算法Chaotic evolution optimization-附Matlab免费代码

引言 本期介绍了一种基于混沌动力学的元启发式算法-混沌进化优化算法Chaotic evolution optimization&#xff0c;CEO。CEO的主要灵感来源于二维离散记忆映射的混沌演化过程。通过利用记忆映射的超混沌特性&#xff0c;对CEO算法进行数学建模&#xff0c;为进化过程引入随机搜…...

51单片机俄罗斯方块开机动画

/************************************************************************************************************** * 名称&#xff1a;Game_Star * 功能&#xff1a;开机动画 * 参数&#xff1a;NULL * 返回&#xff1a;NULL ******************************************…...

RK3588开发板部署DeepSeek-R1-Distill-Qwen-1.5B的步骤及问题

目录 引言 为什么要做端侧部署 技术发展层面 应用需求层面 开发与成本层面 产业发展层面 模型选择 模型蒸馏 模型转换 量化选择 量化方式 模型大小 计算效率 模型精度 测试 测试程序编译 测试结果 结语 引言 最近DeepSeek已经成为一个非常热门的话题&#x…...

网络安全 | 安全信息与事件管理(SIEM)系统的选型与实施

网络安全 | 安全信息与事件管理&#xff08;SIEM&#xff09;系统的选型与实施 一、前言二、SIEM 系统的功能概述2.1 数据收集与整合2.2 实时监控与威胁检测2.3 事件响应与自动化2.4 合规性管理 三、SIEM 系统选型的关键因素3.1 功能需求评估3.2 可扩展性与性能3.3 易用性与可维…...

DeepSeek接口联调(postman版)

第一步&#xff1a;获取API key 获取APIkeys链接https://platform.deepseek.com/api_keys 点击创建 API key 即可免费生成一个key值&#xff0c;别忘记保存。 第二步&#xff1a;找到deepseek官方接口文档 文档地址&#xff1a;https://api-docs.deepseek.com/zh-cn/ 第三步…...

RadASM环境,win32汇编入门教程之三

;运行效果 ;win32汇编环境&#xff0c;RadAsm入门教程之三 ;在这个教程里&#xff0c;我们学一下如何增加控件&#xff0c;比如按钮&#xff0c;其它的控件类似这样增加 ;以下的代码就是在教程一的窗口模版里增加一个按钮控件&#xff0c;可以比较一下&#xff0c;增加了什么内…...

oracle多次密码错误登录,用户锁住或失效

多次输入错误账号查询状态&#xff1a; select username,account_status from dba_users; TEST EXPIRED(GRACE) 密码错误延迟登录&#xff0c;延迟登录还能登录 或者 TEST LOCKED(TIMED) 密码错误锁 TEST EXPIRED(GR…...

HCIA-Datacom笔记3:网络工程

网络工程 网络工程 在信息系统工程方法和完善的组织机构指导下&#xff0c;根据网络应用的需求&#xff0c;按照计算机网络系统的标准、规范和技术&#xff0c;规划设计可行性方案&#xff0c;将计算机网络硬件设备、软件和技术系统地集成在一起&#xff0c;以成为满足用户需…...

[NGINX]命令行参数

-? | -h 打印帮助信息 -c file 指定配置文件 -e file 指定错误日志文件 (1.19.5)。特殊值stderr选择标准错误输出。 -g directives 设置全局配置指令&#xff0c;例如&#xff1a;nginx -g "pid /var/run/nginx.pid; worker_processes sysctl -n hw.ncpu;" -p pref…...

http 模块

在现代 Web 开发中&#xff0c;HTTP 协议是客户端与服务器之间通信的基础。Node.js 自带的 http 模块提供了一种简单而强大的方式来创建 HTTP 服务器和客户端&#xff0c;使得开发者可以直接使用 JavaScript 编写高效的网络应用。本文将详细介绍 http 模块的基本概念、核心功能…...

本地部署DeepSeek + AnythingLLM 搭建高效安全的个人知识库

环境准备: 本地部署方案请参考博客:windows平台本地部署DeepSeek大模型+Open WebUI网页界面(可以离线使用)-CSDN博客 windows平台本地部署DeepSeek大模型+Chatbox界面(可以离线使用)-CSDN博客 根据本人电脑配置:windows11 + i9-13900HX+RTX4060+DDR5 5600 32G内存 确…...

LLM - 理解 DeepSeek 的 GPRO (分组相对策略优化) 公式与源码 教程(2)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/145640762 GPRO&#xff0c;即 Group Relative Policy Optimization&#xff0c;分组相对的策略优化&#xff0c;是 PPO(Proximal Policy Optimiz…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...