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

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...