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,即以 750rpx为基准,在小屏手机上表现良好,因为大多数手机的设计稿都是以750px 为基准,但在大屏设备上会等比放大,导致内容过大。
ii. px的特点:
px是固定单位,不会随屏幕变化,在大屏设备上能保持合适的尺寸,但在小屏设备上可能显示过小
相关文章:
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-…...
光伏设计软件分类:无人机、Unity3D引擎齐上阵
无人机3D设计 无人机可搭载高分辨率光学相机、激光雷达等测绘设备,对目标区域进行全方位、多角度的航拍作业。通过对采集到的影像数据进行导入处理,运用复杂的图像识别算法与三维重建技术,构建出云端实景3D模型,在实景3D模型中进…...
太速科技-616-基于6U VPX XCVU9P+XCZU7EV的双FMC信号处理板卡
基于6U VPX XCVU9PXCZU7EV的双FMC信号处理板卡 一、板卡概述 板卡基于6U VPX标准结构,包含一个XCVU9P 高性能FPGA,一片XCZU7EV FPGA,用于 IO扩展接口,双路HPC FMC扩展高速AD、DA、光纤接口等。是理想应用于高性能数字计算&…...
国产鲲鹏920+欧拉+达梦
1,访问达梦官网 产品下载-达梦数据 1.1,官网没有欧拉的版本; 1.2,拨打客服热线,联系售前单独获取试用版 2,创建鲲鹏920欧拉环境: 2.1,阿里云:没有arm系统 2.2…...
LeetCode--146. LRU 缓存【Golang中的list】
146. LRU 缓存 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类: LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中,则返回关键字的值,…...
查看notebook的jupyter token
如果你忘记了jupyter的token,那么你可以命令行登录后台,查看。 jupyter notebook list 把token复制下,贴到网站上即可。jupyter登录页已经提示了。...
vue+springboot+webtrc+websocket实现双人音视频通话会议
前言 最近一些时间我有研究,如何实现一个视频会议功能,但是找了好多资料都不太理想,最终参考了一个文章 WebRTC实现双端音视频聊天(Vue3 SpringBoot) 只不过,它的实现效果里面只会播放本地的mp4视频文件&…...
什么是高亮环形光源
高亮环形光源是一种常用于机器视觉、工业检测和光学测量的照明设备。其特点是光线均匀、亮度高,并且呈环形分布,能够为被检测物体提供均匀的照明,减少阴影和反光,提高图像采集的质量。 主要特点: 环形设计:光源呈环形分布,适合安装在镜头周围,能够为物体提供均匀的照明…...
2025年3月一区SCI-混沌进化优化算法Chaotic evolution optimization-附Matlab免费代码
引言 本期介绍了一种基于混沌动力学的元启发式算法-混沌进化优化算法Chaotic evolution optimization,CEO。CEO的主要灵感来源于二维离散记忆映射的混沌演化过程。通过利用记忆映射的超混沌特性,对CEO算法进行数学建模,为进化过程引入随机搜…...
51单片机俄罗斯方块开机动画
/************************************************************************************************************** * 名称:Game_Star * 功能:开机动画 * 参数:NULL * 返回:NULL ******************************************…...
RK3588开发板部署DeepSeek-R1-Distill-Qwen-1.5B的步骤及问题
目录 引言 为什么要做端侧部署 技术发展层面 应用需求层面 开发与成本层面 产业发展层面 模型选择 模型蒸馏 模型转换 量化选择 量化方式 模型大小 计算效率 模型精度 测试 测试程序编译 测试结果 结语 引言 最近DeepSeek已经成为一个非常热门的话题&#x…...
网络安全 | 安全信息与事件管理(SIEM)系统的选型与实施
网络安全 | 安全信息与事件管理(SIEM)系统的选型与实施 一、前言二、SIEM 系统的功能概述2.1 数据收集与整合2.2 实时监控与威胁检测2.3 事件响应与自动化2.4 合规性管理 三、SIEM 系统选型的关键因素3.1 功能需求评估3.2 可扩展性与性能3.3 易用性与可维…...
DeepSeek接口联调(postman版)
第一步:获取API key 获取APIkeys链接https://platform.deepseek.com/api_keys 点击创建 API key 即可免费生成一个key值,别忘记保存。 第二步:找到deepseek官方接口文档 文档地址:https://api-docs.deepseek.com/zh-cn/ 第三步…...
RadASM环境,win32汇编入门教程之三
;运行效果 ;win32汇编环境,RadAsm入门教程之三 ;在这个教程里,我们学一下如何增加控件,比如按钮,其它的控件类似这样增加 ;以下的代码就是在教程一的窗口模版里增加一个按钮控件,可以比较一下,增加了什么内…...
oracle多次密码错误登录,用户锁住或失效
多次输入错误账号查询状态: select username,account_status from dba_users; TEST EXPIRED(GRACE) 密码错误延迟登录,延迟登录还能登录 或者 TEST LOCKED(TIMED) 密码错误锁 TEST EXPIRED(GR…...
HCIA-Datacom笔记3:网络工程
网络工程 网络工程 在信息系统工程方法和完善的组织机构指导下,根据网络应用的需求,按照计算机网络系统的标准、规范和技术,规划设计可行性方案,将计算机网络硬件设备、软件和技术系统地集成在一起,以成为满足用户需…...
[NGINX]命令行参数
-? | -h 打印帮助信息 -c file 指定配置文件 -e file 指定错误日志文件 (1.19.5)。特殊值stderr选择标准错误输出。 -g directives 设置全局配置指令,例如:nginx -g "pid /var/run/nginx.pid; worker_processes sysctl -n hw.ncpu;" -p pref…...
http 模块
在现代 Web 开发中,HTTP 协议是客户端与服务器之间通信的基础。Node.js 自带的 http 模块提供了一种简单而强大的方式来创建 HTTP 服务器和客户端,使得开发者可以直接使用 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:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/145640762 GPRO,即 Group Relative Policy Optimization,分组相对的策略优化,是 PPO(Proximal Policy Optimiz…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
leetcodeSQL解题:3564. 季节性销售分析
leetcodeSQL解题:3564. 季节性销售分析 题目: 表:sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
day36-多路IO复用
一、基本概念 (服务器多客户端模型) 定义:单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用:应用程序通常需要处理来自多条事件流中的事件,比如我现在用的电脑,需要同时处理键盘鼠标…...
uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)
UniApp 集成腾讯云 IM 富媒体消息全攻略(地理位置/文件) 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型,核心实现方式: 标准消息类型:直接使用 SDK 内置类型(文件、图片等)自…...
