lcgyh
commented
6 years ago 一.像素知识
例子：iphone5分辨率640x1136(iphone5手机说640x1136指的是物理像素，实际是320x568px)
关于像素：
1.px:逻辑像素，浏览器使用的抽象单位，
2.dp/pt:物理像素，
3.dpr:设备像素缩放比
4.关系：1px=(dpr)2*dp 因为iphone5dpr=2,所以iphone5在平面上1px=4dp;在宽或者高上1px=2dp,因此640x1136dp=320x568px 关于设备缩放比 DPI：打印机每英寸可以喷的墨汁点 PPI：屏幕每英寸像素数量，即单位英寸内的像素密度,ppi越高图像越清晰，可视度越低，默认缩放比越大， 根据计算公式：ppi=√11362+6402/4=326ppi 根据表格一下表格可知道iphone5默认缩放比为2，即dpr=2 ldpi mdpi hdpi xhdpi ppi 120 160 240 320 默认缩放比： 0.75 1.0 1.5 2.0 总结：根据屏幕物理像素和尺寸，可以计算ppi,对比表格可以知道默认缩放比，此值即为dpr,进而可以知道屏幕实际为多少逻辑像素。
二.关于rem使用
一般移动端设计稿为640 x 1136,（px）,假设我们设置html的font-size为20px即1rem=20px;我们以iphone5为浏览设备为标准制作，那么我们在切图写页面的时候，rem和px这个关系是怎样处理的呢？（注：iphone5分辨率为320*568px）
答：假定我们从设计稿上切一张480px的图，我们的rem计算过程为：
320/640=1/2； //应该设置的尺寸占设计稿尺寸多少比例
480（1/2）/20=480/40=12rem 总结公式：设计稿任意尺寸px（设备屏幕px/设计稿尺寸px）/(font-size)
rem相关