CSS3------物理与逻辑像素基础 遮罩层！！

前言

今天学习了物理与逻辑像素的一些基础，VW, VH新单位，当然只有理论是不够的，开发是一门技术活，有很多细节需要在实践中理解。

【内容】
移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等。
vw和vh是CSS3中的新单位，是一种视窗单位，在移动端也同样适用。
①窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
②窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh

屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米

屏幕分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点，指的是设备屏幕实际拥有的像素点。

【物理像素–UI设计师像素】

重点：
UI----物理像素
前端—逻辑像素

【相关的面试题】
移动端的设计图是几倍图？
苹果6开发，设计师给的是2倍图，375逻辑像素，750设计师

【逻辑像素/设备独立像素】
也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。

【屏幕像素密度】
每英寸屏幕所拥有的像素数，英文简称PPI （pixels per inch）。
单位dpi

设备像素比（Device Pixel Ratio, DPR）：一个设备的物理像素与逻辑像素之比。

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里࿰