美文网首页
小程序(响应式像素rpx)与px

小程序(响应式像素rpx)与px

作者: Egde | 来源:发表于2018-01-05 15:59 被阅读0次

首先简单说px是抽象的css单位,一个px在不同的设备下有不同的物理像素(换算由浏览器操作)。是浏览器提供的统一的标准单位,使在不同设备下有相同的效果

小程序设定不同大小的手机屏幕宽度都是750rpx,rpx可以根据屏幕真实宽度自适应

以iphone 6屏幕为例。i6屏幕宽度375px.小程序里宽度750rpx, 365px = 750rpx.比例是1 : 2。不出意外UI都会以i6为标准做设计

在小程序的页面中可以通过getApp()获取小程序的实例,该实例中有一个systemInfo属性,包含了systemInfo{pixelRatio, radio, screenHeight, screenWidth, windowHeight, windowWidth, ....}其中radio就是px/rpx(i6为375/750=0.5), pixelRadio是rpx/px的值(i6为750/375=2)。有时候知道这些很有用,这也是我遇到问题才来整理的。

相关文章

  • 小程序(响应式像素rpx)与px

    首先简单说px是抽象的css单位,一个px在不同的设备下有不同的物理像素(换算由浏览器操作)。是浏览器提供的统一的...

  • rpx和rem

    一、 rpx:全称“response pixel”,即响应式的px,rpx单位是微信小程序中css的尺寸单位,它可...

  • 小程序入门

    最近在写一个简单的小程序,在此记录小程序相关知识。 关于rpx 1px = 2rpx;px在手机上不会做响应,rp...

  • 记录小程序常用知识点

    1.rpx与px换算 小程序编译后,rpx会做一次px换算。换算是以375个物理像素为基准,也就是在一个宽度为37...

  • 小程序 样式WXSS

    1.尺寸单位(rpx)可以根据屏幕宽度进行自适应 1rpx=0.5px=1物理像素 注:小程序中 不需要主动引入样...

  • 微信小程序- wxss

    1、单位尺寸 屏幕宽度375px,共有750个物理像素,750rpx = 375px = 750物理像素1rpx ...

  • CSS学习----px、rpx、em、rem、%、vw、vh、v

    px 像素,pixel的缩写。作用:px设置固定的布局或者元素大小 rpx rpx (responsive pix...

  • 微信小程序生成海报图,并完美适配

    小程序像素单位是rpx,而canvas用的是px ,在这里我先用 wx.getSystemInfo 去获取屏幕的w...

  • 微信小程序

    px与rpx: px:微信小程序里面px跟web端px是不一样的,微信小程序里面的px指逻辑分辨率,即pt,比如i...

  • rpx转px

    小程序 wxss 中使用 rpx,而 js 中 获取到的值是 px,所以存在rpx 转 px 的问题。以 iPho...

网友评论

      本文标题:小程序(响应式像素rpx)与px

      本文链接:https://www.haomeiwen.com/subject/tehsnxtx.html