css像素

css像素 （逻辑）
4 ppi -> 设备像素（物理像素）
iPhone 4 css像素 320 * 480
设备像素 640 * 960
dpr : 设备像素比
设备像素 640 * 960 / css像素 320 * 480
1个 css像素 （px） = 4个设备像素 (ppi)
宽是2倍的关系 — 1个 css像素 的宽 = 2个设备像素 的宽
高是2倍的关系 — 1个 css像素 的高 = 2个设备像素 的高
dpr = 2;(很重要)
UI 根据 设备像素 640 * 960
css像素 320 * 480
怎么让设备像素 640 * 960 内容 显示在 css像素 320 * 480 的范围内？
设备像素/dpr(2)
font-size： 默认情况下是16px = 1em = 1rem
rem : 单位 始终是相对根标签 HTML的font-size 来显示大小的；
em : em的大小是根据自身或者最近的父元素的font-size：的值来显示的；
默认情况下： 1rem = 16px
html = font-size:100px;
1rem = html font-size:100px; 为了好计算；
注：HTML的font-size要大于12px；
思考：怎么让HTML的font-size不是固定的值？
vw和vh是视口（viewport units）单位:
vw: 视口宽度 不管屏幕的分辨率是多大 ，都是固定的 100vw = 当前设备的宽
vh: 视口高度 不管屏幕的分辨率是多大 ，都是固定的 100vh = 当前设备的高
以iPhone 6 为案例： 375 * 667 ； (标准)
375px = 100% = 100vw 1vw = 1% = 3.75px
HTML： font-size：100px = 26.66667vw
以iPhone 4 为案例： 320 * 480 ；
320px = 100% = 100vw 1vw = 1% = 3.2px
HTML： font-size：100px = 31.2vw