移动端适配

/* 

rpx 是一个相对单位可以根据屏幕宽度进行自适应 规定屏幕宽度为750rpx 

在 IPhone6 屏幕宽度为 375px 共有 750个物理像素则 750rpx = 375px = 750物理像素 (1rpx = 0.5px = 1物理像素)

设备          rpx换算px(屏幕宽度/750)      px换算rpx(750/屏幕宽度)

IPhone5       1rpx = 0.42px(320 / 750)   1px = 2.34rpx(750 / 320)

IPhone6       1rpx = 0.5px(375 / 750)    1px = 2rpx(750 / 375)

IPhone6Plus   1rpx = 0.552px(414 / 750)  1px = 1.81rpx(750 / 414)

*/

/*

假设UI设计师给出一个宽 750px 的移动端设计稿且设计稿上有一个 230px * 320px 的元素(宽230 高320)

1. 将设计稿等分为 7.5 份，则每份为 100px

<meta name="viewport" content="width=device-width, initial-scale=1.0">

假设在 IPhone6 上

2. 根据设备像素比缩放网页并动态添加 meta 标签用于设置视口宽度为设备宽度 初始化缩放比例

    let scalc = 1 / window.devicePixelRatio

    let text = `<meta name="viewport" content="width=device-width, initial-scale=${scalc}, maximum-scale=${scalc}, minimum-scale=${scalc}, user-scalable=no">`

    document.write(text)

3. 设置 HTML 元素的 font-size 为窗口宽度(375 ) / 设计稿等分的份数(7.5)

    document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'

此时 1rem 等价于 50px (rem基准值为50px)

计算设计稿上的元素则为：元素大小 / rem基准值(50px)

230px * 320px ==> (230/50)rem * (320/50)rem 

    width: calc(230rem / 50);height: calc(320rem / 50);

获取设备像素 window.devicePixelRatio  2 (DPR为2)

获取窗口宽度 window.innerWidth 375 (屏幕宽度为375px)

计算出设备物理像素 window.innerWidth * window.devicePixelRatio 750 (共有750个物理像素)

*/