当前位置: 首页 > 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…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...