在不同的移动设备上小程序应该怎么设置rpx单位

发布时间:2020-12-19 12:00:02 作者:小新
来源:亿速云 阅读:277

这篇文章将为大家详细讲解有关在不同的移动设备上小程序应该怎么设置rpx单位,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

摘要: 我们在做微信小程序的开发时,经常会遇到在写样式表的时候发现用PX的效果不太理想的情况。日常开发中,我们常用rem、em来做响应式布局的像素单位,他们都是相对单位。rem相对于文档的根元素,em相对于父元素。但是在 ...

我们在做微信小程序的开发时,经常会遇到在写样式表的时候发现用PX的效果不太理想的情况。日常开发中,我们常用rem、em来做响应式布局的像素单位,他们都是相对单位。rem相对于文档的根元素,em相对于父元素。但是在微信小程序的官方文档用rpx来做响应式布局单位!那什么是RPX,应该如何设置呢?今天我们就来好好了解一下。

在不同的移动设备上小程序应该怎么设置rpx单位

[color=rgb(44,]
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

在不同的移动设备上小程序应该怎么设置rpx单位

说实话,一开始没看懂。rpx到底是个啥?又该如何理解“750rpx = 375px = 750物理像素”这句话呢?

开始之前,我们先扯一扯像素、物理长度、设备独立像素、设备独立像素比都是些啥?

【像素】:它不是自然界的物理长度,指基本原色素及其灰度的基本编码。

【物理像素】:它是显示器(电脑、手机屏幕)最小的物理显示单位,每个物理像素由颜色值和亮度值组成。是不是有点眼熟?我们要记住物理像素指的是显示器上最小的点。

【设备独立像素】:它又称密度无关像素,划重点——密度无关,是计算机程序实际处理的虚拟像素(如css的px),由相关关系转化为设备像素。这个相关关系就是指下面要介绍的——设备像素比

【设备像素比】:设备像素比 = 物理像素 / 设备独立像素,单位是dpr!

还是没有看懂?没有关系,我们从图片上来看一下移动设备的分辨率和rpx的关系:

在不同的移动设备上小程序应该怎么设置rpx单位

以iPhone6为例:

已知,1. 设备宽高 375 * 667,在这里我们可以看做是css中的px(密度无关像素);2. retina屏幕的dpr为2。

求 iPhone6 的物理像素是多少?

送分题啊,同学们!

根据公式,我们计算出iPhone 6 的物理像素为 750 * 1334

结论:

在不同的屏幕上(普通屏幕 vs retina屏幕),css像素所呈现的大小(物理尺寸)是一致的,不同的是1个css像素所对应的物理像素个数是不一致的。

在普通屏幕下,1个css像素 对应 1个物理像素(1:1)。 在retina 屏幕下,1个css像素对应 2*2个物理像素(1:4)。

【位图像素】:一个位图像素是栅格图像(如:png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如:显示位置,颜色值,透明度等)。觉得复杂?你只需要记住1px表示一个图片最小的点。不信?我们来用PS放大一张图片,可以看到图片被拆分成无数个点,但无论你如何放大那些小点,他们都不能再次被拆分了,因为他们已经是像素级别的点了,已经是最小的了。

理论上,1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示。

所以,在宽高375 * 667,dpr为2 的 iPhone 6中完美显示200*300(css pixel)img标签,图片的尺寸应该为多少呢?答案是:400 * 600。

这就是我们针对iPhone 6 的设计稿的尺寸基于 750*1334 来设计的目的了。

回到正题.......rpx是啥?

有了上面的做铺垫,我们知道了对于iPhone6 来说, 1rpx = 1物理像素,1rpx = 0.5px;

如果不是iPhone 6 呢?

1rpx = window.innerWidth/750。

1px = 1rpx * dpr。


2.样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。



[AppleScript] 纯文本查看 复制代码

@import "common.wxss";  
@import "temp/loadBottomTemp/loadBottomTemp.wxss";

3.内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
(1)style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。



[AppleScript] 纯文本查看 复制代码

//动态样式  
<view style="color:{{color}};" />  
style="width:{{imageWidth}}rpx;height:{{imageHeight}}rpx";  
//静态样式  
style="color: #1083E5;font-size: 48rpx;font-weight:bold;"

(2)class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。


<view class="normal_view" />  
class="container-row buydes-center-des-select"

4.选择器
目前支持的选择器有:

在不同的移动设备上小程序应该怎么设置rpx单位

5.全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。


二:设备物理像素(设备像素) 设备逻辑像素(设备独立像素) 代码CSS像素 设备像素比 viewport深入理解

1.viewport(可视区域大小)的概念理解和知识积累
(1)移动设备上的viewport就是设备的屏幕上能用来显示网页的那一块区域,就是浏览器上用来显示网页的那部分区域
(2)viewport不一定是浏览器或者设备屏幕可视区域的大小,可能比可视区域大,也可能比可视区域小,因为viewport的大小是可以设置的
(3)大部分移动设备默认的viewport都是980px,多数情况下要大于device-width,因此一般都要在移动端重置viewport,让width=device-width
(4)通过JavaScript获取viewport的方式:document.documentElement.clientWidth,获取device-width的方式window.innerWidth,获取设备像素比window.devicePixelRatio
(5)苹果从iPhone4开始引进了Retina屏幕,一个CSS像素可以表示多个物理像素,并且在页面缩放到其他比例时候,也可以做到CSS 的1px表示多个device pixels
(6)前端开发中的CSS pixels和设备分辨率所讲的resolution pixels 无关,开发中的CSS pixels和设备像素比有关

2.移动端的HTML5开发META的常用设置


<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">  
<meta content="yes" name="apple-mobile-web-app-capable">  
<meta content="black" name="apple-mobile-web-app-status-bar-style">  
<meta content="telephone=no" name="format-detection">

第一个meta标签表示:强制让文档的宽度(viewport宽度)与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
width - viewport的宽度 height - viewport的高度 [device-width(设备的物理像素宽) | pixel_value] pixel_value是具体的像素值
案例:


 <meta content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放,这里有的资料写成no有的写成0
第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
在web app应用下状态条(屏幕顶部条)的颜色;
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch5的Retina屏幕为40px)。
第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。

HTML5 META标签常用设置参考资料点击打开链接点击打开链接 点击打开链接

3.设备物理像素(设备像素),设备逻辑像素(设备独立像素),代码CSS像素,设备像素比
设备物理分辨率(device pixels):物理分辨率也叫设备像素,物理分辨率是LED显示屏显示的图像原始分辨率

设备逻辑分辨率(device independent pixels):人对于物体真实尺寸的认知(屏幕大小),设计使用逻辑像素来思考界面

代码CSS像素:CSS像素是Web编程的概念,独立于设备的用于逻辑上衡量像素的单位,也就是说我们在做网页时用到的CSS像素单位是抽象的,而不是实际存在的

iphone 6为例(设备像素比是2):
设备物理像素(设备像素):750x1334
设备逻辑像素(设备独立像素):375x667
代码CSS像素:375x667
device-width(设备的物理像素宽):375 (1 CSS PX = 2 设备的物理像素)

**案例:**iphone 6s 的物理像素是750x1334,JS中window.innerWidth就是获取设备的物理像素,为什么window.innerWidth获取的值是375而不是750呢?
因为window.innerWidth的值是用CSS pixels来表示的,而iphone 6s的设备像素比是2,1 CSS PX = 2 设备的物理像素,所以window.innerWidth获取的值是375px,而不是750px(750px = 375px * 设备像素比)

在1倍率的屏幕上: 1 CSS PX = 1 设备的物理像素
在2倍率的屏幕上: 1 CSS PX = 2 设备的物理像素
设备像素比=设备像素/设备独立像素(物理像素/逻辑像素)
图片实际像素 = 图片逻辑像素/设备像素比


1倍:1pt=1dp=1px(mdpi、iPhone 3gs)  
2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)  
3倍:1pt=1dp=3px(xxhdpi、iPhone 6 plus)

以iPhone 5s为例,屏幕的分辨率是640×1136,倍率是2。浏览器会认为屏幕的分辨率是320×568,仍然是基准倍率的尺寸。
所以在制作页面时,只需要按照基准倍率来就行了。无论什么样的屏幕,倍率是多少,都按逻辑像素尺寸来设计和开发页面。
只不过在准备资源图的时候,需要准备2倍大小的图,通过代码把它缩成1倍大小显示,才能保证清晰。


关于在不同的移动设备上小程序应该怎么设置rpx单位就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. 怎么在小程序中设置缓存过期
  2. 在Flutter工程基础上怎么集成及运行小程序

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序 rpx单位 rp

上一篇:微信小程序页面间跳转怎么监听事件

下一篇:phpmyadmin导出数据库文件的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》