导致原因
在没有写移动端项目之前,1px = 1px在pc端是一直通用的,如果要加一条1px宽的细线,直接写border: 1px solid #ccc;这样就是可以的;但是后来接触到移动端项目,才知道直接写1px的线,放在移动端显示的时候是比1px宽的,但这是为什么呢?明明写了1px的细线,在部分手机上就会显示2px、3px的宽度呢?
原因就是移动端的分辨率往往跟设备的物理像素不匹配,例如iphone6s的分辨率是750*1334,手机已375px的像素显示,那么在页面中1px的像素就会显示为2px,因为750/375*1px=2px;所以在移动端的显示效果就会是看到两个像素的宽度,如果要正常的显示1px的细线,则需要设置border: 0.5px solid #ccc;这样0.5px的像素在移动端显示就是1px。
对于iphone还好,尺寸比例就那几个固定的值,直接设置为0.5px就好,但是对于android设备来说就没有那么容易简单了,安卓设备厂家众多,屏幕及分辨率的尺寸各不相同,所以就需要一个可以一劳永逸的方法来解决1px这种问题,下面列出几种主流的解决方法。
解决方法
1、使用小数
如上面提到的,可以使用小数来表示宽度,在移动端,移动端window对象有个devicePixelRatio属性, 用它来表示设备物理像素和css像素的比例,比如上面提到的比例为2,iphone上的比例一般为2或者3
这时可以使用媒体查询来解决这个问题
1 @media screen and (-webkit-min-device-pixel-ratio: 2) { 2 .border { border: 0.5px solid #ccc } 3 } 4 @media screen and (-webkit-min-device-pixel-ratio: 3) { 5 .border { border: 0.333333px solid #ccc } 6 }
但是这种方法android不适用
2、使用transform:scaleY
同样可以根据devicePixelRatio来对1px进行伸缩,当devicePixelRatio=2是伸缩0.5,当devicePixelRatio=3时伸缩0.33333,大部分条件下,0.5就已经够用了,差别不是特别大,事实上许多1px也是只做到了scaleY(0.5);
1 .line{ 2 width: 100%; 3 height: 1px; 4 background-color: black; 5 margin-top: 100px; 6 transform: scaleY(0.33333); 7 transform-origin: 0 0; 8 }
3、使用background渐变
背景渐变, 渐变在透明色和边框色中间分割
1 @media screen and (-webkit-min-device-pixel-ratio: 2){ 2 .ui-border-t { 3 background-position: left top; 4 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e0e0e0),to(#e0e0e0)); 5 } 6 }
4、使用伪元素
div:after { content: " "; width: 100%; height: 200px; border-radius: 4px; border: 1px solid #000; transform: scale(0.5, 0.5); transform-origin: 0 0; position: absolute; }
这种方式可以设置圆角,同样可以设置1边border
5、使用border-image
自我感觉这种方法比较麻烦,还要处理图片,听不实用的,用的话可以参考