css3 - 手机网页中用css写1px的描边,为什么需要加一句overflow:hidden才能真正显示1px?
本文介绍了css3 - 手机网页中用css写1px的描边,为什么需要加一句overflow:hidden才能真正显示1px?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
最近做webapp开发的时候和设计同学调ui,对方对1px比较执着,后来参考了设计同学看到的他认准是1px的页面,发现别人比我多写的一句就是overflow:hidden,去Google、stackOverflow搜了一番还是没有找到答案,所以来这里请教各位。
以下代码是实现了设计同学认准的1px的方式:
div{
height: 1px;
width:100px;
background: black;
overflow: hidden;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
测试效果图:
第1条线是我之前没加overflow:hidden的效果,第2条线是加了之后的效果,对比还是比较明显的,明显第2条线更细。
解决方案
其实,加上overflow:hidden;只是取巧的做法,1像素的线在不同移动设备上显示的效果是不一样的,这涉及到移动端开发的设备适配问题.因为手机的dpr值不一样,dpr=1时,scal=1,1像素的线显示就是1像素;dpr=2时,scal=0.5,1像素的线也显示正常;dpr=3时,也一样,建议看一下http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
这篇关于css3 - 手机网页中用css写1px的描边,为什么需要加一句overflow:hidden才能真正显示1px?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文