由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了
小编阅读过其他作者的文章中有写0.5px的写法，在理论上最小的单位是1px。所以会出现有的设备写0.5px无效（没有边框）的情况。
如何使用正确的1px单位又能在移动设备上显示1px的效果呢？
本文将介绍使用CSS3的transform属性的scale值来解决这个问题，这也是最常用的解决方案。下方的源码中说明1px(线条/边框)解决方案
效果对比（图片效果有点问题，请复制下方源码查看最终效果）源码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><metaname="author"content="helang.love@qq.com"><title>移动端1px(线条/边框)解决方案</title><styletype="text/css">body{margin:0;padding:0;font-size:14px;color:#333;font-family:'MicrosoftYaHei','TimesNewRoman',Times,serif;}/*线条*/.list{margin:020px;list-style:none;line-height:42px;padding:0;}.list>li{padding:0;position:relative;}.list>li:not(:first-child):after{/*CSS匹配非第一个直接子元素*/content:"";display:block;height:0;border-top:#999solid1px;width:100%;position:absolute;top:0;right:0;transform:scaleY(0.5);/*将1px的线条缩小为原来的50%*/}/*边框*//*其他作者可能会通过设置4个边的线条凑出边框线的效果，这样做不仅代码不够精简，而且调整圆角问题也会非常麻烦*/.button{line-height:42px;text-align:center;margin:20px;background-color:#f8f8f8;position:relative;border-radius:4px;}.button:after{content:"";position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;border:1pxsolid#999;transform:scale(0.5);transform-origin:50%50%0;box-sizing:border-box;border-radius:8px;/*尺寸缩小50%，即圆角半径设置为按钮的2倍*/}</style></head><body><ulclass="list"><li>线条1px</li><li>web前端河浪</li><li>helang.love@qq.com</li></ul><divclass="button">边框1px</div></body></html>作者：黄河爱浪邮箱：helang.love@qq.com
