每次ios视觉稿还原时，我都在想为什么设计师总是给出750px的设计稿？
想弄明白这个问题，我又问自己下面两个小问题，其实这两个问题是相互联系的，让我们一一道来
问题一：像素和分辨率是什么？
问题二：为什么是750，而不是375？
先回答第一个问题，像素和分辨率是什么
- 像素
像素即px，是画面中最小的点（单位色块）。像素的大小是没有固定长度值的，不同设备上1个单位像素色块的大小是不一样的，一个像素点是一个颜色。像素有个物理像素和设备独立像素之分。- 物理像素
一个物理像素是显示器(手机屏幕)上最小的物理显示单元（像素颗粒），在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 - 设备独立像素
也叫密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素，也称为逻辑像素。css像素就是设备独立像素的一种。 - 设备像素比(device pixel ratio )简称dpr
设备像素比 = 物理像素 / 逻辑像素(px)
- 物理像素
- 分辨率
分辨率 = 画面水平方向的像素值 * 画面垂直方向的像素值。
分辨率可以分为两方面：屏幕分辨率和图像分辨率。-
屏幕分辨率
水平方向的像素点数 * 垂直方向的像素点数 -
图像分辨率
图像分辨率是指每英寸图像内的像素点数。
图像分辨率是有单位的，叫像素每英寸（PPI），数值越高显示效果越细致圆滑，而不是越逼真。另外，这个数值高了以后，手机每次要渲染的像素数量就提高了，所以当然会更加费电。
PPI = 根号（x^2 +y^2）/ 屏幕尺寸。 -
屏幕分辨率和图像分辨率的关系
（1）图像的分辨率 > 显示器的分辨率
局部显示：即屏幕的像素有多少就显示多少像素，这时只能看到图片的某一部分，可以上下左右的移动来看完整的内容。
完整显示：图片的像素会被压缩，这时可以看到完整的图片内容，不过在细节上是丢失一小部分像素的。（2）图像的分辨率 < 显示器的分辨率
1:1显示：即图片的分辨率是多少，就用屏幕上的多少个像素来显示，这时屏幕是以点对点的方式来显示图片，不过图片不是全屏，只在屏幕中央的一部分。
缩放显示：图片不是被压缩像素，而是被人为的插入了很多像素，图片看起来很大，满屏显示，不过有效像素很少。效果就是很不清晰。
-
知道了分辨率和像素的基本知识后，我们来回答第二个问题？为什么iphone6的设计稿是750px，而不是375px?
首先我们将这个问题延伸一下，750px是iphone6的物理像素，问题就变成移动端设计稿为什么是按照设备的物理像素所给？
也叫做逻辑像素(对于前端来说,和我们的css像素是一样的),这个不同的设备是不一样的。在viewport为ideal-viewport模式时, 如iphone6此时的viewport为375px,代表着我们在css中写375px就可以达到全屏的效果;
之所以这么做，主要是为了考虑移动端网页适配的问题。
-
各个设备的屏幕分辨率不同，dpr不同，设计师如果针对每个设备出一个设计稿估计会吐血，所以设计师只会出少数固定尺寸的设计稿，那么固定尺寸的设计稿如何变成各个设备上都可以完美显示的页面呢？这就需要做页面适配，现在移动端的适配方案主要是rem布局。
-
rem布局的核心就是将css像素单位转换为rem单位，进而实现一套代码在不同设备上的等比例显示，1rem的设定是根据不同的设备而设定的，设定方式有两种：一种是通过js动态设定；另一种是通过媒体查询设定。这里不做展开，我们仅看一下js动态设定的内容，方便我们理解适配
function changeRootFont() { var designWidth = 750, rem2px = 100; document.documentElement.style.fontsize = ((window.innerWidth / designWidth) * rem2px) + 'px'; //iphone6: (375 / 750) * 100 + 'px'; };这段代码通过动态的获取设备独立像素,然后除以设计稿的宽度,然后赋给根字体的fontsize,以致来动态改变跟字体大小,做到自适应。为什么要乘100,首先375 / 750是0.5,浏览器默认最小字体为12px,所以我们需要放大一些,而100又很好算,我们只需要将设计稿量出来的长度(px),小数点向左移2位,单位变成rem就好了。
网友评论