移动端1px边框问题的解决方案

使用小数写px值 通过媒体查询判断设备的像素比 DRP 根据不同像素比写不同的边框大小

.border{border:1pxsolid#ccc}@mediascreenand(-webkit-min-device-pixel-ratio:2) {    .border{border:0.5pxsolid#ccc}}@mediascreenand(-webkit-min-device-pixel-ratio:3) {    .border{border:0.333333pxsolid#ccc}}

使用边框图片

这样的1张6X6的图片, 9宫格等分填充border-image, 这样元素的4个边框宽度都只有1px

@mediascreenand(-webkit-min-device-pixel-ratio:2){    .border{border:1pxsolid transparent;border-image:url(border.gif)2repeat;    }}

使用CSS3 box-shadow

.shadow{-webkit-box-shadow:01px1px-1pxrgba(255,0,0,0.5);box-shadow:01px1px-1pxrgba(255,0,0,0.5);}

viewport结合rem (推荐使用)

//devicePixelRatio=2设置meta<metaname="viewport"content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">//devicePixelRatio=3设置meta<metaname="viewport"content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

使用 :before , :after 与 transform（推荐使用）

//第一种方法//构建1个伪元素,将它的长宽放大到2倍,边框宽度设置为1px,再以transform缩放到50%.radius-border{position: relative;}@mediascreenand(-webkit-min-device-pixel-ratio:2){    .radius-border:before{content:"";pointer-events: none;/* 防止点击触发 */box-sizing: border-box;position: absolute;width:200%;height:200%;left:0;top:0;border-radius:8px;border:1pxsolid#999;-webkit-transform(scale(0.5));-webkit-transform-origin: 0 0;transform(scale(0.5));transform-origin: 0 0;    }}@mediascreenand(-webkit-min-device-pixel-ratio:3) {    .radius-border:before{content:"";pointer-events: none;/* 防止点击触发 */box-sizing: border-box;position: absolute;width:200%;height:200%;left:0;top:0;border-radius:8px;border:1pxsolid#999;-webkit-transform(scale(0.3333));-webkit-transform-origin: 0 0;transform(scale(0.3333));transform-origin: 0 0;    }}