【移动应用开发技术】在不同的移动设备上小程序应该怎么设置rpx单位

【移动应用开发技术】在不同的移动设备上小程序应该怎么设置rpx单位

这篇文章将为大家详细讲解有关在不同的移动设备上小程序应该怎么设置rpx单位，在下觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。摘要:我们在做微信小程序的开发时，经常会遇到在写样式表的时候发现用PX的效果不太理想的情况。日常开发中，我们常用rem、em来做响应式布局的像素单位，他们都是相对单位。rem相对于文档的根元素，em相对于父元素。但是在...我们在做微信小程序的开发时，经常会遇到在写样式表的时候发现用PX的效果不太理想的情况。日常开发中，我们常用rem、em来做响应式布局的像素单位，他们都是相对单位。rem相对于文档的根元素，em相对于父元素。但是在微信小程序的官方文档用rpx来做响应式布局单位！那什么是RPX,应该如何设置呢？今天我们就来好好了解一下。[color=rgb(44,]rpx（responsivepixel）:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。说实话，一开始没看懂。rpx到底是个啥？又该如何理解“750rpx=375px=750物理像素”这句话呢？开始之前，我们先扯一扯像素、物理长度、设备独立像素、设备独立像素比都是些啥？【像素】：它不是自然界的物理长度，指基本原色素及其灰度的基本编码。【物理像素】：它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。是不是有点眼熟？我们要记住物理像素指的是显示器上最小的点。【设备独立像素】：它又称密度无关像素，划重点——密度无关，是计算机程序实际处理的虚拟像素（如css的px），由相关关系转化为设备像素。这个相关关系就是指下面要介绍的——设备像素比【设备像素比】：设备像素比=物理像素/设备独立像素，单位是dpr！还是没有看懂？没有关系，我们从图片上来看一下移动设备的分辨率和rpx的关系：以iPhone6为例：已知，1.设备宽高375*667，在这里我们可以看做是css中的px（密度无关像素）；2.retina屏幕的dpr为2。求iPhone6的物理像素是多少？送分题啊，同学们！根据公式，我们计算出iPhone6的物理像素为750*1334结论：在不同的屏幕上(普通屏幕vsretina屏幕)，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的iPhone6中完美显示200*300(csspixel)img标签，图片的尺寸应该为多少呢？答案是：400*600。这就是我们针对iPhone6的设计稿的尺寸基于750*1334来设计的目的了。回到正题rpx是啥？有了上面的做铺垫，我们知道了对于iPhone6来说，1rpx=1物理像素，1rpx=0.5px;如果不是iPhone6呢？1rpx=window.innerWidth/750。1px=1rpx*dpr。2.样式导入使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。[AppleScript]纯文本查看复制代码3.内联样式框架组件上支持使用style、class属性来控制组件的样式。(1)style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。[AppleScript]纯文本查看复制代码(2)class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。4.选择器目前支持的选择器有：5.全局样式与局部样式定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。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表示多个devicepixels(6)前端开发中的CSSpixels和设备分辨率所讲的resolutionpixels无关,开发中的CSSpixels和设备像素比有关2.移动端的HTML5开发META的常用设置第一个meta标签表示：强制让文档的宽度(viewport宽度)与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览；width-viewport的宽度height-viewport的高度[device-width(设备的物理像素宽)|pixel_value]pixel_value是具体的像素值案例:initial-scale-初始的缩放比例minimum-scale-允许用户缩放到的最小比例maximum-scale-允许用户缩放到的最大比例user-scalable-用户是否可以手动缩放,这里有的资料写成no有的写成0第二个meta标签是iphone设备中的safari私有meta标签,它表示：允许全屏模式浏览；第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式；在webapp应用下状态条（屏幕顶部条）的颜色；默认值为default（白色）,可以定为black（黑色）和black-translucent（灰色半透明）。注意：若值为“black-translucent”将会占据页面px位置,浮在页面上方（会覆盖页面20px高度–iphone4和itouch5的Retina屏幕为40px）。第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。HTML5META标签常用设置参考资料点击打开链接点击打开链接点击打开链接3.设备物理像素(设备像素),设备逻辑像素(设备独立像素),代码CSS像素,设备像素比设备物理分辨率(devicepixels):物理分辨率也叫设备像素,物理分辨率是LED显示屏显示的图像原始分辨率设备逻辑分辨率(deviceindependentpixels):人对于物体真实尺寸的认知(屏幕大小),设计使用逻辑像素来思考界面代码CSS像素:CSS像素是Web编程的概念,独立于设备的用于逻辑上衡量像素的单位,也就是说我们在做网页时用到的CSS像素单位是抽象的,而不是实际存在的iphone6为例(设备像素比是2):设备物理像素(设备像素):750x1334设备逻辑像素(设备独立像素):375x667代码CSS像素:375x667device-width(设备的物理像素宽):375(1CSSPX=2设备的物理像素)**案例：**iphone6s的物理像素是750x1334,JS中window.innerWidth就是获取设备的物理像素,为什么window.innerWidth获取的值是375而不是750呢?因为window.innerWidth的值是用CSSpixels来表示的,而iphone6s的设备像素比是2,1CSSPX=2设备的物理像素,所以window.innerWidth获取的值是375px,而不是750px(750px=375px*设备像素比)在1倍率的屏幕上:1CSSPX=1设备的物理像素在2倍率的屏幕上:1CSSPX=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）在1倍率的屏幕上:1CSSPX=1设备的物理像素在2倍率的屏幕上:1CSSPX=2设备的物理像素设备像素比=设备像素/设备独立像素(物理像素/逻辑像素)图片实际像素=图片逻辑像素/设备像素比以iPhone5s为例,屏幕的分辨率是640×1136,倍