最近做webapp开发的时候和设计同学调ui,对方对1px比较执着,后来参考了设计同学看到的他认准是1px的页面,发现别人比我多写的一句就是overflow:hidden,去Google、stackOverflow搜了一番还是没有找到答案,所以来这里请教各位。
以下代码是实现了设计同学认准的1px的方式:
p{
height: 1px;
width:100px;
background: black;
overflow: hidden;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
测试效果图:
第1条线是我之前没加overflow:hidden的效果,第2条线是加了之后的效果,对比还是比较明显的,明显第2条线更细。
PHP中文网2017-04-17 11:41:53
Actually, adding overflow:hidden; is just a trick. The display effect of a 1-pixel line on different mobile devices is different. This involves the device adaptation problem of mobile terminal development. Because of the DPR value of the mobile phone It’s different. When dpr=1, scal=1, the line display of 1 pixel is 1 pixel; when dpr=2, scal=0.5, the line of 1 pixel is also displayed normally; when dpr=3, the same is true. It is recommended to take a look at http ://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
阿神2017-04-17 11:41:53
This is a bug and can only be solved in this way. This will happen on Android phones. As for why it is written like this, you have to ask the person who developed it
PHP中文网2017-04-17 11:41:53
Elements have a default line height. If it exceeds the line height and is not hidden, it will overflow
天蓬老师2017-04-17 11:41:53
I agree with @anniebaby, you can try setting the row height to 0 to see if the effect is the same.