移动端1px像素

发布于2017年6月02日 23:05:54 ,最后一次修改于2017年6月06日 09:48:53

我们设置1px边框通常设置border:1px solid #ddd,这个在pc浏览器浏览一般没问题,但在移动端浏览器浏览时,由于各种手机终端的dpr不同,1px的值也会变(ipone的dpr为2,浏览时却为2px)。这是学到一个方法去解决这个问题。

主要思路:通过给dom元素设置一个伪类,并定义其宽度,生成1px的边框。在不同的dpr设备上media查询dpr值通过scale去缩放来达到最佳效果。

以下为一简单demo

html:

<div class="demo"></div>

css:

.demo{

position:relative;

}

.demo:after {                   //定义下边框为1px

display:block;

position:absolute;

width:100%;

left:0;

bottom:0;

border: 1px solid #ddd;

content: ' '

}

@media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5){

.demo:after{ -webkit-transform: scaleY(0.7); transform:scaleY(0.7)}

}

@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2){

.demo:after{ -webkit-transform: scaleY(0.5); transform:scaleY(0.5)}

}

以上就可以解决1px在各移动终端的最佳浏览效果了^_^

发表评论