一、像素相关

1.1 物理像素

1) 屏幕的分辨率
2) 设备能控制显示的最小单元，可以把物理像素看成是对应的像素点

1.2 设备独立像素 & css 像素

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代
表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在 android 机中 CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。

1.3 dpr 比 & DPI & PPI

1) dpr: 设备像素比，物理像素/设备独立像素 = dpr， 一般以 iphon6 的 dpr 为准 dpr =2
2) PPI: 一英寸显示屏上的像素点个数
3) DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

二、移动端适配

2.1 viewport

2.1.1 为什么做 viewport 适配

a) 手机厂商在生产手机的时候大部分手机默认页面宽度为 980px
b) 手机实际视口宽度都要小于 980px，如: iphone6 为 375px
c) 开发需求： 需要将 980 的页面完全显示在手机屏幕上且没有滚动条

2.1.2 实现：

这句代码可以让网页宽度和手机视窗宽度匹配

2.2 rem适配

1. 为什么做 rem 适配

a) 机型太多，不同的机型屏幕大小不一样
b) 需求： 一套设计稿的内容在不同的机型上呈现的效果一致，根据屏幕大小不
同的变化，页面中的内容也相应变化

2. 实现

function remRefresh() {
let clientWidth = document.documentElement.clientWidth;
// 将屏幕等分 10 份
let rem = clientWidth / 10;
document.documentElement.style.fontSize = rem + 'px';
document.body.style.fontSize = '12px';
}
window.addEventListener('pageshow', () => {
remRefresh()
})
// 函数防抖
let timeoutId;
window.addEventListener('resize', () => {
timeoutId && clearTimeout(timeoutId);
timeoutId = setTimeout(() =>{
remRefresh()
}, 300)
})

三、(微信)小程序的适配方案

a) 小程序适配单位： rpx
b) 规定任何屏幕下宽度为 750rpx
c) 小程序会根据屏幕的宽度不同自动计算 rpx 值的大小
d) iphone6 下： 1rpx = 1 物理像素 = 0.5px