基本概念
- 屏幕密度
ppi：设备表面上存在的像素数量，它通常以每英寸有多少像素来计算 - 设备独立像素
dp：一个可以由程序使用的虚拟像素(比如说CSS像素) - 设备像素比
dpr：设备像素比 ＝ 物理像素 / 设备独立像素 - CSS像素
DIPs：主要使用在浏览器上，用来精确度量Web页面上的内容
在JavaScript中，可以通过
window.devicePixelRatio获取到当前设备的dprwindow.screen.width获取设备宽度window.screen.height获取设备高度window.userAgent获取agent
chrome浏览器手机类型自定义
f12打开控制台 -> 手机模式 -> 最下方Edit -> add custom device -> save
手淘适配方案
- 只对iOS进行dpr判断，对于Android始终认为其dpr为1
css单位换算
根据设计图，把单位换算成rem。可以使用Sass宏函数
字体处理
- 希望在大屏手机上看到更多文本
- 现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px
- 不希望出现13px和15px这样的尺寸，甚至15.3245px，字体点阵会模糊
总之，一般段落文本还是使用px作为单位。 有的时候文本的字号也需要分场景的，比如slogan,完全可以使用rem计量单位
