当前位置:首页 > 博客 >Html/Css > 正文

移动端1像素问题?

时间:2017-06-22 17:43   作者:admin   点击:

如果你还没有明白为啥出现这个问题?你可以去这个大神博客看看

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/


上边是为啥出现1像素的答案,就简单来说,就是我们手机的物理像素和设备独立像素不一致,存在一个比例,这也就是为啥设计师给你750X1000像素的设计稿,但是你实际做的时候,里面的字体大小、宽度、高度等需要除以2。主要是因为设计是按iPhone6来设计的,而iPhone6的比例就是2,所以实际上我们设计师设计的1像素,在手机上本来该写成1/2=0.5像素的,但是除了IOS8及以上的系统支持这样的写法,其他的都不会识别0.5个像素,包括你转换成rem单位。


实际也有很多解决办法,但是这个是我比较推荐的:

.chat li div span{ position: relative; padding:10px;display: inline-block;background: #fff; border-radius: 5px;}
.chat li div span:after{position: absolute; box-sizing: border-box;border-radius: 10px; left: 0;top:0; content: ' ';width:200%; height:200%;transform: scale(0.5,0.5); border:1px solid #ccc;transform-origin: 0 0; }

比如你想给span加边框,不用网上其他的那样一条一条的写,因为那样要嵌套2次,并且圆角不好处理!可以采用上边的方案!

box-sizing: border-box; /* 边框为内部 */
transform: scale(0.5,0.5); /* 缩放0.5 */
transform-origin: 0 0;/* 缩放原点为0,0 */