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)
(采用之前数据,仅参考)