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>
相关推荐
陈随易20 小时前
真的,你可以不用TypeScript
前端·后端·程序员
郑州光合科技余经理20 小时前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
唐璜Taro21 小时前
Vue3 + TypeScript 后台管理系统完整方案
前端·javascript·typescript
dustcell.21 小时前
haproxy七层代理
java·开发语言·前端
掘金酱21 小时前
「寻找年味」 沸点活动|获奖名单公示🎊
前端·人工智能·后端
患得患失94921 小时前
【前端】前端动画优化的核心
前端
Xin_z_21 小时前
Vue3 + Sticky 锚点跳转被遮挡问题解决方案
前端·javascript·vue.js
REDcker21 小时前
WebCodecs VideoDecoder 的 hardwareAcceleration 使用
前端·音视频·实时音视频·直播·webcodecs·videodecoder
修炼前端秘籍的小帅21 小时前
Stitch——Google热门的免费AI UI设计工具
前端·人工智能·ui
精神状态良好21 小时前
实战:从零构建本地 Code Review 插件
前端·llm