背景：设备分辨率dpr，安卓设备一般设备分辨率为2，相当于是2个像素为1px，在iphone5/6/7/8上设备分辨率为2，相当于2个像素为1px，在6p、7p、8p、x等手机上设备分辨率为3，相当于3个像素为1px；要想在设备锁看起来比较细，在二倍分辨率下就需要0.5px，在3倍分辨率下就需要0.33px，以此来构成1像素
flexable.js就是通过判断设备分辨率，控制meta标签进行相应的放缩，达到1px代表1像素的要求，但是由于安卓设备不支持0.5px，flexable.js对所有安卓设备不做缩放处理，1px代表的是2个像素，因此看来1px在安卓手机上看是很粗的
解决方案：
一、使用tranform放缩，根据after属性，绝对定位到元素上，将宽高放大2倍，然后用transform缩小0.5，达到将边框变细的效果
.light-line{ border: none; box-sizing: border-box; position: relative; &:after{ content: ''; position: absolute; top: 0; left: 0; border: 1Px solid rgba(240,50,47,0.5); box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }}优点：边框四周边边框看起来都很细，单个按钮边框展示无影响
缺点：由于是放缩，在一个列表中会导致某些线条出不来；
二、用svg背景图片，画一条1像素的线条作为背景图片
.light-svg-line{ height: 1Px; background: url("data:image/svg+xml;utf-8,svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'line x1='0' y1='0' x2='100%' y2='0' stroke='#000'/line/svg"); background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==');}优点：作为只有1像素高度的图片，不管是在安卓还是ios都能展示得很细
缺点：作为背景图，适用于列表底边边框；如果四边需要边框，圆角是实现不了的
注： 火狐浏览器对svg的图形处理不了，因此需要将svg转化成2进制
三、box-shadow
.line-box-shdow{ height: 1Px; background: none; box-shadow: 0 1px 0 #e1e1e1;}优点：看起来是比较细
缺点：在ios上看起来比较模糊
四、line-gradient，一半白色，一半黑色，让边距变小
.line-gradient{ height: 1Px; background:linear-gradient(0deg, #fff, #000);}优点：基本能实现
缺点：线比较虚
