移动设备的分辨率与小程序rpx

导读

最近在开发微信小程序，看到rpx的概念想到了rem和px，以及和设计交流知道的pt.对于这些转换一开始还不是特别了解，今天在这里写一个转换概念方便理解

1.设计图一般会给750的尺寸图
2.
寸。并不是指的高也不是宽，是根据屏幕的对角线所计算出来的一个尺寸。

pt也称逻辑像素点（逻辑分辨率。可以理解为长度单位，实际上看到的，和屏幕尺寸有关系。比如说图上的3gs和4/4s都是320,，当5/5s/5c的时候是320但是因为高度变了所以屏幕尺寸为4.0寸）

px物理像素点（物理分辨率。和屏幕尺寸没有任何关系，也不是一个视觉单位。可以理解为像素点，每一个图片就是由多个物理像素点组成，为什么说这不是一个长度单位呢，因为在现实世界中，一个点描述出他的大小吗，不能，只能说有多少个点，不能说多大的点。)
这里就能出一个对应关系,一个pt能包含几个px: 1pt等于2px或者3px或更多;

PPI=物理像素开根号/屏幕尺寸（对角线）或（每一寸包含的多少个物理像素点)。
DPI（是每个长度下面打印点下能打印出多少个物理像素点）

3.为什么4/4s就要比3gs在屏幕显示效果上更好一些呢，更清楚呢？

因为是逻辑像素点下包含的物理像素点的个数有关系，看物理分辨率，3gs的为320×480，4/4s的为640×960.相差了2倍，物理像素点越多图像显示会越清晰。
那么理论上说6/6splus相差3倍 ，图像会更清楚。但是实际上并不会比更清晰。这个密度的是人眼识别不到的，已经到人眼极限。

4.移动设备中，设计师一般给物理分辨率（物理像素点px），而页面渲染（或微信小程序）是逻辑分辨率(pt)

5.iphone6下面0.5pt=1px=1rpx;

6.为什么要用iphone6的物理分辨率来做设计图？更好换算。当时小程序设计的时候是以ip6下设计的，ip6下1px=1rpx;可以做一比一的转换。而ip6 plus下1px=0.6rpx;不行。

可以理解rpx和rem相似（这里的rem是通过js写出的不同分辨率适应不同的尺寸的单位，根据当前页面中的rem单位的样式值都是针对HTML元素的fontsize的值进行动态计算的。
另外说一句：rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。）

//此为rem换算
!(function (win, doc) {
    function setFontSize() {
        // 获取window 宽度
        // zepto实现 $(window).width()就是这么干的
        var winWidth = window.innerWidth;
        // 2016-01-13 订正
        // 640宽度以上进行限制 需要css进行配合
        var size = (winWidth / 750) * 100;
        /*750为设计搞大小*/
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px';
    }

    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
    var timer = null;
    win.addEventListener(evt, function () {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 300);
    }, false);
    win.addEventListener("pageshow", function (e) {
        if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
    // 初始化
    setFontSize();
}(window, document));

7.使用rpx,小程序在不同设备分辨率下自行转换,而使用px为单位不会。
并不是所有地方都要用rpx,比如说字体大小，如果自动适配的话，越小屏幕字体越小，所以这时候要用px。