由于文章篇幅网页游戏制作尺寸，先说结论：像素没有宽度和高度（不要被Photoshop中的像素网格所迷惑），它只代表一个采样的颜色值。 任何图片在存储盘中作为数据信息保存时，只有宽度和高度像素才有意义。 此时的ppi对于图片来说没有任何意义，它无法描述图片有多少英寸的宽度或高度。 ppi的意义只有打印出来之后才明白。 只有打印出来后才能描述图片的高度和宽度。 在制作H5页面时设计原型时，产品经理制作的原型稿建议屏幕宽度为320px。 使用这个尺寸首先是为了浏览方便（现在很多手机的屏幕宽度达到了1440px，用这个尺寸来模拟显然不现实）。 其次，基于iPhone5s标准的手机屏幕宽度较小，在进行内容布局时应向下兼容屏幕宽度。 设计者在制作设计稿时，应将原型稿上的所有尺寸放大一倍。 这样设计稿就可以在移动设备上清晰预览。 前端切片时，按照目前流行的做法，可以直接使用原型稿上的尺寸，即设计稿的1/2。 一般情况下，H5页面设计稿最安全的尺寸是640x1136px，高度为812px。 添加安全线，重要内容在这条线上方（网上有文章说安全线在960px，但我个人认为不准确）。 既保证了在移动设备上的清晰显示，又保证了素材的最小尺寸。 前端推荐使用腾讯智图攻城狮。 这里的图像压缩非常容易使用，并且可以为用户节省大量带宽。
作为本系列文章的“上半部分”，我们将讨论一些基本概念：像素、ppi、分辨率、物理像素、CSS 像素、设备无关像素等。
像素（像素维基百科）
它是图像显示的基本单位，意为“图像元素”。 每个这样的信息元素不是一个点或一个正方形，而是一个抽象样本。 通过仔细处理，图像中的像素在任何比例下都可以看起来像单独的点或正方形； 但在许多情况下，它们显示为点或正方形。
这一段是来自维基百科的解释。 其实，很多了解Photoshop的人都有一个误区：他们认为像素就是一个宽高相等的小正方形，像素都是“那么大”，但他们不知道这个宽度和高度的具体数字是多少。高度。
像素是一个抽象的概念，它是一个相对的单位。
像素描述了图像在某一点的颜色值。 一般来说，一个像素只能描述一种颜色值。
可以先跳过这个话题，介绍一下ppi的概念。 很容易理解像素没有大小。
质子泵抑制剂
PPI的复杂性在于，如果所属的上下文不同，其含义就会完全不同。 当我们谈论显示设备的PPI时，它指的是屏幕的像素密度； 当我们谈论图片时，我们谈论的是打印时的分辨率或者打印机的打印精度。 这里我们主要描述前一种情况。
PPI的全称是Pixel Per Inch，翻译为每英寸像素值。 更精确的术语应该是像素密度，它是单位物理区域内像素值的度量。
图像
示例1：
对于图中的七张图片，假设图片尺寸为1x1英寸，则PPI分别为1、2、5、10、20、50、100。 在相同的物理尺寸内，随着像素数量的增加，图像细节变得更加细致，PPI增加，图像变得更加清晰，像素所占用的空间相对更小。
因此，从讨论像素大小的角度来看，图1中每个框像素的宽度（以英寸为单位）为：1, 1/2, 1/5, 1/10, 1/20, 1/50, 1/100 。 每个不同的 ppi 下像素的大小也不同，因此讨论像素的大小变得毫无意义。 像素没有大小。 像素是一个抽象的概念贴图笔刷，它是一个相对的单位。
像素描述了图像在某一点的颜色值。 一般来说，一个像素只能描述一种颜色值。
例②：
在photoshop中创建两个文档：①800x600px，72ppi，②800x600px，300ppi。 那么这两个文档在PS中或者生成图像时所显示的视觉效果是完全一样的，因为宽度和高度的像素数量是完全一样的，在设备上渲染的效果图是一致的。 当您将文档②中的任何图层复制到文档①时，您会在视觉上注意到该图层不会变大或变小。 只有将这两个文档按照1:1的比例打印为图片时，你才会发现72ppi的图片比300ppi的图片要大（注意ppi的含义）。 前者的宽度（高度）约为后者的4.16（300/72）倍。 。
任何图片在存储盘中作为数据信息保存时，只有宽度和高度的像素数才有意义。 PPI对于图片来说没有任何意义，它不能描述图片的宽度或高度有多少英寸，而只能描述英寸数。 只有打印出来后才有意义。
解决
分辨率一般是指显示系统解析细节的能力。 凡是能够显示图像的东西都称为显示系统，例如显示器、投影仪、照片等。
常用的分辨率单位有：dpi（每英寸点数）、lpi（每英寸线数）和 ppi（每英寸像素数）。 从单位角度来看，分辨率是与物理单位的比率。
日常所说的“这张图片的尺寸（或分辨率）是100x100像素”通常描述的是数码图片。 此描述仅说明图片文件包含多少个像素。 例如，图1中的七张图片中，我们习惯说第一张图片的分辨率是1x1像素，第五张图片的分辨率是20x20像素。 其实它只是描述了图片中像素的数量。
Retina显示屏
这是一种显示技术，可以将更多的像素压缩到屏幕中，从而达到更高的分辨率，提高屏幕显示的精细度。 这个分辨率足以在正常观看距离下人眼看不见。 解析其中的各个像素。
第一个视网膜屏幕用在iPhone 4上，屏幕分辨率为960*640（326ppi）。
对比下面两张图，可以明显看出Retina屏幕的显示效果是否有差异：
图像
图2 iPhone 3GS
图像
图3 iPhone 4
两代iPhone的物理尺寸（屏幕宽度和高度各多少英寸）是相同的。 从上图可以看出，iPhone 4的显示效果明显优于iPhone 3GS。 iPhone 4的分辨率虽然有所提升，但与普通iPhone 4不同，为了像电脑显示器一样显示更多的内容，在显示相同内容时，提高了图片的分辨率。 这种改进方法是通过增加屏幕单位面积的像素数，即像素密度来提高分辨率。 这样做的主要目的是为了提高屏幕显示的精细度。 以配备 Retina Display 的第三代 MacBook Pro 为例，在运行时，显卡以 4 个为一组渲染 2880x1880 像素，并输出原屏幕一个像素显示的大小区域内的图像。 这样，用户看到的图标和文字与原始1440x900分辨率显示的尺寸相同，但分辨率提高了4倍。
注意：在桌面显示器中，当我们调整显示分辨率时，例如从800*600调整为1024*768，屏幕上的文字图标会变小，显示的内容也会增多。 然而，Retina显示方式不会造成这样的问题。 也就是说，Retina显示技术解决的是显示画面精细度的问题，而不是显示内容容量的问题。
设备独立像素
为什么是“每四次”？ 你想要四个一组来显示“原始屏幕的一个像素”？ 这大概就是Retina显示技术的一种体现。 而这些“每四组”的“大像素”可以称为“设备独立像素”，设备独立像素，或者密度无关像素。 它可以是系统中的一个点，这个点代表程序可以处理的点。 然后游戏动态，相关系统将所使用的虚拟像素转换为物理像素。
“与设备无关的像素”也被一些人称为“CSS像素”，这是一个象征性的术语，更倾向于表示与CSS中的尺寸的对应关系。
设备独立像素和物理像素的对应关系可以这样查看：
图像
图4
四人一组之间的类似对应关系可能正是视网膜显示技术所做的。
CSS 像素
作为Web开发人员，我们更多地接触到用于控制元素样式的样式单位像素。 这里的像素称为CSS像素。
CSS 像素有什么特别之处？ 我们可以借用 quirksmode 的这个例子：
假设我们使用PC浏览器打开一个页面。 此时浏览器的宽度为800px，页面上还有一个400px宽的块级元素容器。 很明显，块容器此时应该占据页面的一半。
但如果我们放大页面（通过“Ctrl键”加“+键”），缩放比例为200%，是原始大小的两倍。 此时，块容器水平占据了整个浏览器。
矛盾的是，我们既没有调整浏览器窗口的大小，也没有更改块元素的 CSS 宽度，但它的大小似乎增加了一倍 - 这是因为我们将 CSS 像素增加了一倍。
当 CSS 像素与屏幕像素大小相同 1:1 时：
图像
图5
CSS 像素（黑色边框）开始拉伸。 此时，1个CSS像素大于1个屏幕像素。
图像
图6
也就是说，默认情况下，1个CSS像素应该等于1个物理像素的宽度，但是浏览器的放大操作使得1个CSS像素等于2个设备像素的宽度。 稍后你会看到更复杂的情况。 在高 PPI 设备上，即使默认情况下网页游戏制作尺寸，CSS 像素也相当于多个物理像素的大小。
从上面的例子可以看出，CSS像素始终只是一个相对值。
设备像素比（DevicePixelRatio）
设备像素比=设备物理像素/设备独立像素
设备像素比例可以通过js中的devicePixelRatio参数获取（页面的viewport需要设置content=”width=device-width”。这里是前端布局知识，比较专业。作者只明白，无法解释清楚，请自行百度）
iPhone 4的设备像素比为2，沿线长度（水平、垂直、对角线）的物理像素数与设备上的独立像素数的对应关系为2。
根据这个对应关系，设备的独立像素数量一般可以通过屏幕的物理分辨率和设备像素比来确定。
那么当我们构建移动网站时，我们将视口设置为content=“width=device-width”，与设备无关的像素等于CSS像素。
历史问题屏幕宽度 320px
经常在制作移动网站时，我们会听到有人说原型稿的屏幕宽度应该是320px，设计稿应该是640px的2倍。 网上也有很多文章这么说，H5网页的设计稿应该做成普通屏幕分辨率的2倍。 只是评价。
这是历史遗留问题。 这里所说的屏幕宽度，更准确地说，是viewport设置为width=device-width时的宽度。 习惯上将此宽度称为屏幕宽度，即设备独立像素的宽度。 笔者从其他文章中找到了一些答案。 （原型图的屏幕宽度为320px，一是满足原型软件1:1合适的显示比例，二来保证早期iPhone 320px屏幕宽度的显示要求）
》其实这个属性值很有趣，字面意思是视口宽度等于设备宽度，但实际中不同浏览器给出了一个固定值：320px；这个值还是来自Apple，因为早期的分辨率iPhone为320px*480px，大量为iPhone定制的网站都设置了viewport:width=device-width，并且是按照320px的宽度来设计生产的，因此其他浏览器在添加viewport支持时，也定义了device-width为兼容性而定为 320px。”
那么后来的iPhone 4的屏幕是960x640px。 几乎每个人都知道视网膜显示屏在各个方向上的像素都是两倍。 设备独立像素的屏幕宽度仍为320px。 其他智能手机早期的分辨率基本上使用了大致相同的屏幕尺寸和分辨率，因此一致同意320px。
当然，如果视口的宽度属性设置为固定值，例如320、480、700等，那么视口的宽度将是设置的宽度。 此时设备独立像素宽度即为设置的宽度，物理像素与设备独立像素的比例不再是初始设备像素比例（如iPhone 4中的2）。
当今的智能手机屏幕有各种尺寸和分辨率。 相应的，设备像素比例也不一致，有1、1.5、2、2.25、3等。正常情况下（指视口设置为width=device-width）设备无关的像素宽度不再不仅仅是320px，还有360px、400px等。这是大多数手机统计出来的独立像素数据。
图像
如果设备像素比为N，则表示手机屏幕上的N个物理像素用于显示1个CSS像素。
本文对移动网站涉及的一些概念进行了基本解释。 下一篇我们将介绍在制作H5网页的设计稿和前端布局时最省力的方法。
