手机端和pc端像素有一倍差距:PC=2手机端像素:

具体实现手机端与pc像素相同,要用到缩放:
mixin.styl是一个css中的方法,可以传一个变量【border-1px(rgba(7, 17, 27, 0.1)】
通过after未类绝对定位:加上缩放实现具体的像素转换。

通用的1像素编写:

Vue类似点餐软件开发(四:布局)

Vue类似点餐软件开发(四:布局)


实现pc与手机的像素缩放:

Vue类似点餐软件开发(四:布局)

根据设备的最小dpr:将y轴做一个缩放

Vue类似点餐软件开发(四:布局)

全局引用

Vue类似点餐软件开发(四:布局)

Vue类似点餐软件开发(四:布局)

Vue类似点餐软件开发(四:布局)


相关文章:

  • 2022-02-09
  • 2021-07-19
  • 2021-12-01
  • 2021-07-14
  • 2021-10-07
  • 2021-12-04
  • 2021-09-07
  • 2021-12-04
猜你喜欢
  • 2021-06-02
  • 2022-01-05
  • 2021-09-11
  • 2022-12-23
  • 2022-01-06
  • 2021-12-28
  • 2021-07-30
相关资源
相似解决方案