假设一个手机分辨率为2340 * 1080,请你用Uniapp的标准将它们转换成rpx
时间: 2024-01-24 22:17:13 浏览: 41
Uniapp 的 rpx 转换规则是:屏幕宽度为750rpx时,屏幕宽度为100%。因此,我们需要先计算出这个手机在 750rpx 宽度下的实际像素值,然后再进行转换。
首先,我们需要计算出这个手机在 750rpx 宽度下的缩放比例:
```
scale = 750 / 2340
```
然后,我们可以将屏幕宽度和高度分别除以这个比例,得到它们在 750rpx 宽度下的实际像素值:
```
widthIn750rpx = 2340 * scale ≈ 292.5rpx
heightIn750rpx = 1080 * scale ≈ 135rpx
```
因此,这个手机的分辨率可以表示为:`292.5rpx * 135rpx`。注意,这里的 rpx 是指在 750rpx 宽度下的实际像素值,而不是指像素密度。
相关问题
在uniapp中的style中写的rpx为什么转换到小程序就变成了 rem
这是因为在Uniapp中,rpx单位是用来适配微信小程序的,而rem单位是用来适配H5等其他平台的。因为微信小程序不支持rem单位,所以在编译成小程序时,Uniapp会将rpx单位转换为rem单位。
具体来说,Uniapp将750rpx视为屏幕宽度,将1rpx视为750/屏幕宽度的rem单位。这样做的好处是可以让开发者在编写样式时,使用统一的单位rpx,而不用考虑不同屏幕的不同分辨率,从而方便开发和维护。
如果您想在小程序中使用rpx单位,可以在App.vue的onLaunch函数中添加以下代码:
```js
uni.getSystemInfo({
success: function (res) {
// 将rpx转换为px
let px = res.windowWidth / 750 * 100
// 动态设置html根元素的font-size
document.documentElement.style.fontSize = px + 'px'
}
})
```
这样,就可以将rpx转换为px,并动态设置html根元素的font-size,从而在小程序中使用rpx单位。
为什么在uniapp中写rpx在微信小程序会自动转换为rem 如何解决
在Uniapp中,rpx单位是针对微信小程序的,而rem单位是适用于H5等其他平台的。因为微信小程序不支持rem单位,所以Uniapp会自动将rpx单位转换为rem单位。
如果您想在微信小程序中使用rpx单位,可以在App.vue的onLaunch函数中添加以下代码:
```js
uni.getSystemInfo({
success: function (res) {
// 将rpx转换为px
let px = res.windowWidth / 750 * 100
// 动态设置html根元素的font-size
document.documentElement.style.fontSize = px + 'px'
}
})
```
这样,就可以将rpx转换为px,并动态设置html根元素的font-size,从而在微信小程序中使用rpx单位。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)