一、问题
写css的样式时候，设置元素的边框为1px, 但在移动端上看起来却像是2px
二、为什么会有1px问题？
1.要处理这个问题，得先知道设备的物理像素（设备像素）和逻辑像素（css像素）
物理像素：
移动设备出厂时，不同设备自带的不同像素
逻辑像素：
css中记录的像素
UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系:设备像素比dpr（devicePixelRatio） = 设备像素 / CSS像素
dpr通常可以用 javascript 中的 window.devicePixelRatio 来获取，也可以用媒体查询的 -webkit-min-device-pixel-ratio 来获取。当然，比例多少与设备相关。
在手机上border无法达到我们想要的效果。这是因为 devicePixelRatio 特性导致，iPhone的 devicePixelRatio==2，而 border-width: 1px; 描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。
三、解决方案
利用选择器：before或：after和transfrom
原理：
把原先元素的border去掉，用：before或：after重做border，并用transfrom中的scale缩小一半，原先的元素相对定位，新做的border绝对定位
<style>
//单条border样式设置：
.box{
border:none;
position: relative;
}
.box:bofore{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
transform: scaleY(0.5);
transform-origin: 0 0;
}
//四条border样式设置：
.box{
border:none;
position: relative;
}
.box:before{
content: '';
width: 1200px;
height: 1200px;
border: 1px solid red;
transform: scale(0.5);
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
}
</style>
<body>
<div class="box">box-shadow-1px</div>
</body>
<script>
//结合js来代码来判断是否是Retina屏
if(window.devicePixelRatio && devicePixelRatio >= 2){
document.querySelector('div').className = 'box';
}
</script>
网友评论