使用小数写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; }}
网友评论