uni-app:单位像素rpx

**rpx:**响应式单位,长宽可以随着屏幕大小改变,其尺寸根据iPhone 6的标准来参考(750rpx为占满屏幕宽,1334rpx为占满屏幕长。750×1334rpx)

例子:

现在展示型号为iPhone 12 pro的型号,这里750px和750rpx均为沾满屏幕宽

更换型号为Surface Pro 7:发现宽度为750px的宽度是固定宽,不会随着屏幕更改二区变化,750rpx反之

代码:

html 复制代码
<template>
	<view class="box">
			<view class="box1"></view>
			<view class="box2"></view>
	</view>
</template>

<script>
	export default {

	}
</script>

<style lang="scss">
	.box{
		.box1{
			width:750rpx;
			height:200rpx;
			background-color:pink;
		}
		.box2{
			width:750px;
			height:200px;
			background-color:green;
		}
	}
</style>
相关推荐
这可不简单2 分钟前
方便易懂的自适应方案---echarts和dom样式大小自适应
前端·vue.js·echarts
玲小珑4 分钟前
Auto.js 入门指南(七)定时任务调度
android·前端
橘黄的猫4 分钟前
深入解析 import.meta.url:与 new URL() 的关系及 Vite 中的 base 路径影响
前端·vite
海的诗篇_9 分钟前
前端开发面试题总结-HTML篇
前端·面试·html
Sun_light15 分钟前
用原生 HTML/CSS/JS 手把手带你实现一个美观的 To-Do List 待办清单小Demo
前端·css·html
用户214118326360217 分钟前
dify案例分享--告别手工录入!Dify 工作流批量识别电子发票,5分钟生成Excel表格
前端·人工智能
SweetRetry18 分钟前
前端依赖管理实战:从臃肿到精简的优化之路
前端·人工智能
LaoZhangAI19 分钟前
Claude Code完全指南:2025年最强AI编程助手深度评测
前端·后端
卸任21 分钟前
Electron自制翻译工具:增加中英互译
前端·react.js·electron
LaoZhangAI23 分钟前
FLUX.1 Kontext vs GPT-4o图像编辑全面对比:2025年最全评测指南
前端·后端