收藏
回答

微信小程序从设计尺寸单位如何转WXSS样式?

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 工具 6.5.3 2.0.0


设计师给的设计图尺寸是:750 * 1334 的设计稿,各元素的尺寸单位都是 px;


现在我在小程序开发者工具中做布局时,应该使用什么尺寸单位来布局?尤其是高度单位,宽度单位用 rpx。


高度单位用什么呢?也用 rpx 还是保持用 px ? 字号大小单位能用 rpx 吗?我用 rpx 布出来的样式,和设计稿比较起来差异很大,整个都是缩放了的呢。



回答关注问题邀请回答
收藏

1 个回答

  • 染柒
    染柒
    2019-06-29

    设计都给出 750 * 1334 稿子了,直接使用 rpx 即可,宽、高、字体均可。

    iPhone 6 下有差异要不就是你写错了,要不就是看错了。


    rpx 这一套其实就是前端移动端里的 rem,移动端里常用的一套适配。

    rem(淘宝弹性布局方案 lib-flexble 实践)

    2019-06-29
    有用
    回复 5
    • 怀朔
      怀朔
      2019-06-29

      这样的啊,那看来是我对这个样式规则没有理解清楚,谢谢染柒。

      2019-06-29
      回复
    • 染柒
      染柒
      2019-06-29回复怀朔

      客气了,rpx 是可以根据屏幕宽度进行自适应的,建议看看小程序文档 - Wxss 版块

      2019-06-29
      回复
    • 怀朔
      怀朔
      2019-06-29回复染柒

      之前看这个文档时候,对高度的尺寸单位比较困惑,我理解的高度是可以无限扩展的,只需要在宽度上来弹性自适应即可,不知道之前怎么会出现这种奇怪的想法。现在明白了,宽度、高度、字号,都是可以自适应的。

      2019-06-29
      回复
    • 染柒
      染柒
      2019-06-29回复怀朔

      是的

      2019-06-29
      回复
    • 染柒
      染柒
      2019-06-29回复怀朔

      rpx 可以根据不同机型屏幕进行自适应,将所有机型屏幕宽度规定为 750 rpx,宽、高使用 rpx 后,在不同机型内可以做到宽高较屏幕宽度比例是一致的。


      设计师使用 750 * 1334 作为视觉稿标准是正确的。

      2019-06-29
      回复
登录 后发表内容