前端学习笔记-8.7.2移动端一像素

1像素：

步骤一：新建base.styl的文件，

步骤二：新建index.styl,把base.styl的文件放在里面

步骤三：在main.js引入即可全局使用

为什么需要一像素，看下边：
DIPs指设备独立像素（DPI指每英寸点的个数）
非视网膜屏幕的iphone手机上，屏幕物理像素320px，独立像素也是320px，因此，min-device-pixel-ratio:1。

而对于视网膜屏幕的iphone，如iphone4s，纵向显示的时候，屏幕物理像素640px。当设置<meta name="viewport" content="width=device-width">的时候，其视区宽度并不是640px，而是320px，这是为了有更好的阅读体验-更合适的文字大小。

这样，在视网膜屏幕的iphone上，屏幕物理像素640px，独立像素还320px，因此min-device-pixel-radio: 2。

所以当开发在考虑兼容性的时候，会将css属性设置成：(ios)
//ios
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio:1.5)
.border-1px
&::after
-webkit-transform : scaleY(0.7)
transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-radio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
//android-opera
@media (-webkit-min-device-pixel-ratio: 2.25),(min-device-pixel-radio: 2.25)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
（采用之前数据，仅参考）