1像素:

步骤一:新建base.styl的文件,
前端学习笔记-8.7.2移动端一像素
步骤二:新建index.styl,把base.styl的文件放在里面
前端学习笔记-8.7.2移动端一像素
步骤三:在main.js引入即可全局使用
前端学习笔记-8.7.2移动端一像素
为什么需要一像素,看下边:
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)
(采用之前数据,仅参考)

相关文章:

  • 2021-08-03
  • 2021-05-31
  • 2021-10-03
  • 2021-12-10
  • 2021-12-10
猜你喜欢
  • 2021-11-22
  • 2021-08-21
  • 2021-12-12
  • 2022-01-08
  • 2021-11-18
  • 2021-11-30
  • 2021-12-26
相关资源
相似解决方案