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

猜你喜欢

转载自blog.csdn.net/qq_43000359/article/details/82952340