利用media查询设置小数像素

.border {border: 1px solid #eee}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border {border: 0.5px solid #eee}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border (border: 0.33333px solid #eee)
}

对设备有要求，且目前的兼容性比较差

viewport+rem+js

在移动端的开头设置meta标签如下

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

然后利用JS来获取meta元素，对window.devicePixelRatio属性进行判断，再对其中的content属性进行重新设置。

var viewport = document.querySelector("meta[name=viewport]");
if(window.devicePixelRatio==1){
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
}
if(window.devicePixelRatio==2){
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no');
}
if(window.devicePixelRatio==3){
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.3333333, maximum-scale=0.3333333,, user-scalable=no');
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px'; 
docEl.style.fontSize = fontsize;

var fontsize = 10 * (docEl.clientWidth / 320) + 'px'，是设置HTML的font-size的大小的，单位是px。documnet.body.clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变.

首先浏览器一般默认是16px=1rem，1px=1/16rem=0.0625rem，设置HTML标签的font-size的大小10px（默认大部分浏览器为16px），页面其他标签可以通过设置rem为HTML的倍数来实现适配。

320的设置 = 10*(clientWidth/320) * 以320宽，10px作为基准，其中clientWidth在iPhone5或5S下是320px,iPhone6下是375px,iPhone6P下是414px等等。

640的设置 = 20*(clientWidth/320) 也是这样以320为基准。

transform: scale(0.5)方案

div::after{
    content:'';
    width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}
.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}

媒体查询media+transform实现

@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}