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

自从乔帮主提出retina屏以来。可练就了不少前端兄弟的像素眼,有强迫症的伙伴们日子可就煎熬了。为了画出真正的1像素边框,前端猿们也是受尽各浏览器的虐待了。

关于什么是移动端1像素边框问题,先上两张图,大家就明白了。

移动端1像素边框问题的解决方案_第1张图片移动端1像素边框问题的解决方案_第2张图片


实现1PX边框的方法有很多,各有优缺点,比如通过背景图片实现、通过transform: scale(0.5)实现。本次实现的是通过VIEWPORT+rem实现的,优点是可以自适应已知的各类手机屏幕,且不存在其它方法存在的变颜色困难、圆角阴影失效问题。缺点嘛,这方法适全新项目,如果老项目想用这种方法,改动量估计会比较大。

关于设备像素比devicePixelRatio可以参考这文章http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

下面是代码:



	
		1px question
		
				
		
		
	

	
		
下面的底边宽度是虚拟1像素的
上面的边框宽度是虚拟1像素的


想看效果的,直接将代码复制下来放服务器,用手机浏览就可以看到效果了。

顺便吐嘈一下,CSDN博客的移动端的边框也不是真1像素的……


你可能感兴趣的:(前端)