转换px到rpx

呱嗨喵

于 2021-11-08 17:54:13 发布

阅读量841

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp vue 微信小程序文章标签： javascript 前端 css3

本文链接：https://blog.youkuaiyun.com/YUlangML/article/details/121212816

vue 同时被 3 个专栏收录

53 篇文章

订阅专栏

uniapp

44 篇文章

订阅专栏

微信小程序

27 篇文章

订阅专栏

该博客探讨了在uni-app中如何根据设备信息动态计算并设置组件的paddingTop属性。通过uni.getSystemInfo获取屏幕信息，然后在px2rpx方法中将像素值转换为rem，以便适配不同屏幕大小。这种方法有助于实现响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	// :style="{paddingTop:paddingTop+ 'rpx'}" 这里是标签里的



//这里是data里的
			//  data() {
			// 	return {
			// 		paddingTop:'',
				
			// 	};
			// },


//这里是onLoad里的
			// onLoad() {
			// 	uni.getSystemInfo({
			// 		success: res=> {
			// 			console.log("屏幕信息", res);
			// 			this.px2rpx(res.windowTop)
			// 		}
			// 	});
			// },

//这里是methods里的函数
			px2rpx(px) {
				
				// :style="{paddingTop : `${px2rpxs(Custom.bottom)}rpx`}" class="container"
				const system = uni.getSystemInfoSync()
				this.paddingTop= px / system.windowWidth * 750
				console.log(this.paddingTop)
			},