物理像素，逻辑像素，dpr 傻傻分不清楚

物理像素

物理像素（分辨率）是指设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750*1334个物理像素。

同一个设备的物理像素是固定的，这是厂商在出厂时就设置好了的。

逻辑像素

逻辑像素是一个抽象概念。

各种设备：手机，平板，笔记本等逻辑像素。

• 手机：3xx~4xx（短边）之间
• 平板：10寸平板 7xx~8xx （短边）之间
• 笔记本：13寸 1280（长边）
• 24寸显示屏：1920（长边）

像素比 dpr 

dpr 是物理像素与逻辑像素之间的比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素（长2倍，宽2倍，乘起来就是4倍）显示1个逻辑像素。

CSS中的 1px 并不等于设备的1px

从iphone4开始，推出了所谓的Retina屏，分辨率提高了一倍，变成640*960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，1个CSS像素是等于4个物理像素的。

1物理像素边框的实现

当viewport的属性initial-scale为1时，页面大小正常，但initial-scale为0.5时，页面被缩小了1倍，像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。

屏幕能够显示的最小粒度是1个物理像素，iPhone4的像素比为2，设置border-width:1px后，边框占了4个物理像素，如果能让边框的宽度为1物理像素，那么它就比1个CSS像素要细。

实现1：viewport

设置 <meta name="viewport" content="width=device-width, initial-scale=0.5"> 实现。
 

实现2：transform 的 scale

如果 dpr 为2，可以使用 transform: scale(0.5)。

实现2：媒体查询

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-bt-1px {
        position: relative;
        &::after {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: green;
            transform: scaleY(0.5);
        }
    }
}