像素
我们看到上图320x480叫分辨率，而这个所谓的分辨率就是说白了就横向320个像素纵向480个像素组成
什么叫像素
像素（Pel，pixel;pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。电视的图像是由按一定间隔排列的亮度不同的像点构成的，形成像点的单位也就是像素，组成图像的最小单位就是像素。从计算机技术的角度来解释，像素是硬件和软件所能控制的最小单位。它指显示屏的画面上表示出来的最小单位，不是图画上的最小单位。一幅图像通常包含成千上万个像素，每个像素都有自己的颜色信息，它们紧密地组合在一起。由于人眼的错觉，这些组合在一起的像素被当成一幅完整的图像。当修改图像的某区域，实际上是在修改该区域内的像素。对这些像素修改的好与坏将决定最终图片的质量。单位面积内的像素越多，图像的效果就越好。彩色电视图像是由成千个像素点所组成的，而且每个像素都是由红绿蓝三种颜色并排组成的。(注意每个像素的大小是不固定的，他是根据设备的分辨率决定的)
什么是分辨率
屏幕分辨率是指纵横向上的像素点数，单位是px。屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。
需要区分的概念：
CSS像素和设备像素在有的时候是不一样的
设备（物理）像素 ：
设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，只有屏幕一经出厂就固定不会改变。
CSS（逻辑）像素：
CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素。
设备像素信息图
历史原因
在PC端，1个CSS像素往往都是对应着电脑屏幕的1个物理像素,所以我们无需关心PC端的CSS像素和设备像素。
在手机端，最开始其实1个CSS个像素也是对应着手机屏幕的1个物理像素，但是后来一个改变世界的男人(乔布斯)改变了这一切。从iPhone4开始，苹果公司推出了所谓的retina视网膜屏幕。iPhone4的屏幕尺寸却没有变化，但是像素点却多了一倍，这就导致了在1个CSS个像素等于1个物理像素的手机上, 我们设置1个CSS像素只会占用1个物理像素，而在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用2个物理像素，所以仔细观察你会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些。
对比图
设备像素比
设备像素比device pixel ratio简称dpr，即物理像素和设备独立像素的比值。为什么要知道设备像素比呢？因为这个像素比会产生一个非常经典的问题，1像素边框的问题。
1px边框问题
当我们css里写的1px的时候，由于它是逻辑像素，导致我们的逻辑像素根据这个设备像素比（dpr）去映射到设备上就为2px，或者3px，由于每个设备的屏幕尺寸不一样，就导致每个物理像素渲染出来的大小也不同（记得上面的知识点吗，设备的像素大小是不固定的），这样如果在尺寸比较大的设备上，1px渲染出来的样子相当的粗矿，这就是经典的一像素边框问题。
解决方案
transform: scale(0.5) 方案
div { height:1px; background:#000;-webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden;}
css根据设备像素比媒体查询后的解决方案
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
适配方案
viewport：
标准适配方案：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
viewport的功能：
1. width 可以设置宽度 (device-width 当前设备的宽度)
2. height 可以设置高度
3. initial-scale 可以设置默认的缩放比例
4. user-scalable 可以设置是否允许用户自行缩放
5. maximum-scale 可以设置最大缩放比例
6. minimum-scale 可以设置最小缩放比例
在<meta name="viewport" content="" > content="" 使用以上参数
1. width=device-width 宽度一致比例是1.0
2. initial-scale=1.0 宽度一致比例是1.0
3. user-scalable=no 不允许用户自行缩放 （yes，no 1,0）
viewport参数
rem：
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
rem 是相对于html节点的font-size来做计算的。所以在页面初始话的时候给根元素设置一个font-size，接下来的元素就根据rem来布局，这样就可以保证在页面大小变化时，布局可以自适应，如此我们只需要给设计稿的px转换成对应的rem单位即可。
//set1rem = viewWidth / 10
functionsetRemUnit() {
var rem = docEl.clientWidth / 10;
docEl.style.fontSize = rem +'px'
}
setRemUnit();
vw,vh:
vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。
vw,vh
vh和vw方案和rem类似也是相当麻烦需要做单位转化，而且px转换成vw不一定能完全整除，因此有一定的像素差。
媒体查询：
所有设备都使用同一种布局相对显得呆板，建议还是不同屏幕情况下做媒体查询适配不同方案吧。
网友评论