相关概念
屏幕相关
屏幕尺寸
斜对角的距离 单位为英寸（inch）比如苹果手机的6.1英寸
屏幕分辨率
指屏幕在: 横向 纵向上所拥有的物理像素点总数 一般用n*m表示 iPhone6 的屏幕分辨率是750 * 1334 注意点:
- 屏幕分辨率是一个固定值 屏幕生产出来就确定了无法修改
- 屏幕分辨率和显示分辨率是两个概念, 系统设置中可以修改显示分辨率
- 显示分辨率是设备当前所用到的物理像素点数, 也可以说: 屏幕分辨率>=显示分辨率
屏幕密度
又称: 屏幕像素密度, 是指屏幕上每英寸里包含的物理像素点个数, 单位是ppi, 或者dpi, 两个值的计算方式相同,只是使用的场景不同，ppi用来衡量屏幕，dpi用来衡量打印机。 屏幕分辨率：x * y ppi = sqrt(x^2 + y^2) / 屏幕尺寸
sqrt() 表示开根号
像素相关
物理像素
又称：设备像素，物理像素是一个长度单位，单位是px。1个物理像素就是屏幕上的一个物理成像点，就是屏幕中的一个微小的发光物理元器件（可以理解为超级微小的灯泡），是屏幕能显示的最小粒度。它由屏幕制造商决定，屏幕生产后无法修改。例如iphone6的屏幕像素是 750px * 1334px
css像素
又称：逻辑像素，css像素是一个抽象长度单位，单位也是px，它是为web开发者创造的，用来精确度量web页面上的内容大小。我们在写css，js，sass等用到的像素就是css像素。
设备独立像素
设备独立像素简称DIP或DP，又称：屏幕密度无关像素
苹果公司2010年推出了新的显示标准：在屏幕尺寸不变的前提下，把更多的物理像素点压缩至一块屏幕里，这样分辨率也就越高，显示也会更加细腻。这导致css像素和物理像素不再是1:1的对应关系。
设备独立像素的出现，使得即使在高清屏幕下，也能让元素由正常的尺寸，让代码不受设备的影响，他是设备厂商根据屏幕特性设置的，无法更改。
设备独立像素与物理像素的关系
- 普通屏幕下 1个设备独立像素 = 1个物理像素
- 高清屏幕下 1个设备独立像素 = N个物理像素
设备独立像素和css像素的关系
在无缩放的情况下（标准情况）1css像素 = 1设备独立像素
像素之间的关系
在不考虑缩放的情况下（理想情况） 普通屏幕（1dpr）：1css 像素 = 1 设备独立像素 = 1物理像素 高清屏幕（2dpr）：1css 像素 = 1 设备独立像素 = 2物理像素 高清屏幕（3dpr）：1css 像素 = 1 设备独立像素 = 3物理像素
程序员写了100px： 1. 代表100css像素 2. 若用户不进行缩放，则对应100设备独立像素 3. 在2dpr设备上，这100css像素就占据了200个物理像素（横向）
图片的高清显示
- 位图（png、jpg），放大会失真（位图的最小单位为位图像素）
- 矢量图（svg），根据数学关系实时绘图呈现给用户 所以不会失真。
移动端 视口相关观念
布局视口
早期的时我们这样做：pc端网页宽度一般都为:960px~1024px这个范围，就算超出了该范围，960px ~1024px这个区域也依然是版心的位置，浏览器厂商针对移动端设备设计了一个容器，先用这个容器去盛装pc端的网页，这容器的宽度一般是980px，不同的设备可能有所差异，但相差并不大；随后将这个容器等比例压缩到与手机等宽，这样就可以保证没有滚动条且能完整呈现页面，但是这样做依然有问题：网页内容被压缩的太小，严重影响用户体验。
视觉视口
视觉视口是用户可见的区域，它的绝对宽度永远和设备屏幕一样宽，但这个宽度里所包含的css像素值是变化的，例如：一般手机会将980个css像素放入视觉视口中，在ipad pro上会将1024个css像素放入视觉视口中。
理想视口标准
与屏幕（设备独立像素）等宽的布局视口，称之为理想视口，所以也可以说理想视口是一种标准；让布局视口宽度与屏幕（设备独立像素）等宽。靠meta标签实现。
理想视口的特点：
- 布局视口和屏幕等宽，以iPhone6为例，符合理想视口标准之后：设备独立像素：375px，布局视口宽度:375px
- 用户不需要缩放、滚动就能看到网站的全部内容
- 为移动端设备单独设计一个移动端网站
设置理想视口的具体方法：
<meta name="viewport" content="width=device-width" />
缩放
PC端： 放大时
- 视口变小
- 元素的css像素值不变，但一个css像素所占的面积大了
缩小时
- 视口变大
- 元素的css像素值不变，但一个css像素所占的面积小了
移动端： 放大时
- 布局视口不变
- 视觉视口变小
缩小时
- 布局视口不变
- 视觉视口变大
注意： 移动端缩放不会影响页面布局，因为缩放的时候，布局视口没有变化，简记：移动端的缩放没有改变布局视口的任何东西！
