zoukankan      html  css  js  c++  java
  • 移动分辨率和rpx

    从一张设计图的实现说起,为什么模拟器下ip6的分辨率是375而设计图一般给750?

    看上面的这张图,首先屏幕尺寸就是实际的物理尺寸,重点是分辨率pt和分辨率px,要回答这个问题,就要明白pt与px。那么什么是pt呢?pt又叫做逻辑分辨率,简单的理解可以理解为长度单位。他只和屏幕尺寸有关系,3和4都是320pt。为什么5也是320pt呢?是因为高度变了,所以尺寸更大一点。但是他的宽度都是320的逻辑分辨率。所以简单的理解他这个pt跟屏幕的尺寸有关系。他就是一个长度单位

    那么px是什么概念呢?我们叫他叫做物理分辨率。他和屏幕的尺寸没有任何关系,他也不是一个视觉单位。简单一点,可以理解一个像素点。我们看到的图片都是由很多个像素点构成的。为什么他不是一个长度相关的单位呢?我们只能描述有多少个点,不能描述是多大的点。
     
    所以这能得到pt与px的一个关系,就是一个pt里面有几个px。或者说一个pt里面能够包含多少个px。那么为什么4比3的屏幕效果更好一些呢?这个就是逻辑分辨率里面包含的物理像素点个数有关系。3和4的逻辑分辨率都是320*480。关键在于它们的物理分辨率不一样。4对应是640*960。3对应的是320*480。同样的长度,3少一半。
    所以Reader下面是1倍,2倍的关系。这个表示什么呢?这个表示同一个pt下面包含了多少个px。我们同一个单位下面,物理点越多,图像的显示越细腻,越清晰。6plus是3倍。每单位下面比6多出一个像素点。理论上是更清晰的。但是人眼分辨不出来,2倍已经是人眼能够分辨的极限。
    最后是这个ppi。ppi是什么概念,他和Reader的概念是一样的。Reader的意思是每个pt下面包含多少个px。ppi表示每一寸包含多少个物理像素点。所以这个163是怎么得出来的。3.5寸表示的是对角线的距离,那么对角线的距离知道了,那怎么求这个163呢,就是勾股定理,320*480平方开根号再除以3.5寸得到的。
    所以设计师是根据物理分辨率给的,不是根据逻辑分辨率给。所以6下面是2倍关系。
    总结:
    1、pt也称为逻辑分辨率
    2、pt的大小和屏幕尺寸有关系,简单可以理解为长度和视觉单位
    3、px指物理分辨率,和屏幕尺寸没有关系。因为点没有大小,只有多少个。
    a、1个pt可以有1个px构成,也可以有2个,还可以有3个甚至更多构成。
    b、ip6下2个px才构成1个pt。



    如何适配不同的机型?

    所以设计图给的是物理像素750px,但我们做图的时候,width里面的px指的是逻辑分辨率,不是物理分辨,所以设置宽度的时候需要/2,375px。但是我们不会只针对一种机型,要在不同的机型下作图。375是ip6下面的逻辑分辨率,但是到了ip6plus就不好用了,ip6plus是414。换成414后,切成ip5又不行了,只显示一半的图片。这样肯定不行,那怎么办?

    需要自动去换算,根据不同的机型,自动去算单位

    使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px不会。为什么不会,因为在小程序下面,这个px指的是逻辑分辨率,也就是长度单位。是个视觉单位,所以长度是一定的。
    ip6下 1px = 1rpx = 0.5pt

    所以设计图是按照ip6下设计的,那么这里的px跟小程序里面的rpx是 1:1 的关系
    <image src="/images/timg.jpeg" style="750rpx; "></image>



    为什么要在ip6的物理分辨率来做设计图?为什么这里的750rpx就能适配所有的机型?
    因为在ip6下,很好换算。1比1的关系。那么ip6下750rpx刚刚好称满屏幕。在ip6 plus下,750rpx就不是750px的逻辑分辨率,而是750/0.6=1250的逻辑像素。也是撑满ip6 plus。当时小程序就是依ip6来设计的,然后根据不同的逻辑分辨率换算出不同的rpx。所以按照ip6的物理像素写,就能自动的转换各种屏幕
    ip6下 1px = 1rpx
    ip6 plus下 1px = 0.6rpx


    所以rpx是根据不同的机型做自适应调整的,但是有时候不需要自适应调整,就不能用rpx

  • 相关阅读:
    Silverlight的依赖属性与附加属性(五)
    Silverlight Behavior技术(三)
    JQuery EasyUI 简单的左右布局左边Tree右边区域打开tab右键菜单实现 Murray
    使用Areas分离ASP.NET MVC项目(前后台以及对应功能模块) Murray
    IDisposable 接口 Murray
    MVC3/4 自定义HtmlHelper截断文本内容 Murray
    30个最常用css选择器解析(经典) Murray
    asp.net 中使用 SqlBulkCopy 将一个目录下指定类型的数据文件导入到数据库 Murray
    EntityState 枚举的5中状态的变化 Murray
    IEnumerable<T> 接口主要成员 Murray
  • 原文地址:https://www.cnblogs.com/wzndkj/p/11117907.html
Copyright © 2011-2022 走看看