像素比

• 点、points （抽象单位 ）

• 像素渲染     （栅格化）

• 物理像素     （调整大小）

• dpi、ppi

• 获取像素比    （window.devicePixelRatio）

详细请参考：
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

视口

• width 设备宽度 [pixel_value | device-width]

• user-scalable 是否允许缩放 （no||yes）

• initial-scale 初始比例

• minimum-scale 允许缩放的最小比例

• maximum-scale 允许缩放的最大比例

• target-densitydpi (以淘汰)

设置1:1像素比

• 随着科技的日新月异，屏幕的物理像素越来越高，导致像素和物理像素比从原来的1:1到现在的1:X，而这种情况会导致前端布局因为在不同物理像素比的情况下产生不同的问题，所以通过JS动态控制统一将所有的像素比还原成1:1

let  ratio = 1 / window.devicePixelRatiodocument.write('<meta name="viewport" content="width=device-width, initial-scale=' + ratio + ',maximum-scale=' +
ratio + ',minimum-scale=' + ratio + '">')

设置rem，根据屏幕大小自动调整适合该屏幕的像素

let $html = document.querySelector("html")

//获取文档宽度let pageWidth = $html.getBoundingClientRect().width$html.style.fontSize = pageWidth / 16 + 'px'  //不一定是除以16，除以多少你自己喜欢

作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/fbc1933c3c9d