公告列表
公告列表
收藏
回答

使用rpx开发，不同手机下字体大小，图标差别很大，换成px，不同手机差别依旧很大，求解答？

想做一个不同设备统一字体大小的小程序，我看有人说用px，但是px实现起来依旧差别很大，而且我看px使用，会随着客户手机设置字体大小变化，我真的无解了，现在做出来对照设计ui一看丑的不行，求大佬支招

对了我用的是思源字体

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

5 个回答

  • H1HAO 🇨🇳
    H1HAO 🇨🇳
    2023-10-11

    首先开发请务必在模拟器使用 iPhone 6/7/8 的机型，这样能确保rpx和px的比例是1:2，这样开发出来在任何机型都是样式基本都是一模一样的，然后字体在每种机型的字体都是不一样的，你说你用的自定义 的思源字体，那你需要文本处添加行内高line-height，确保高度一致，然后你还想ios和安卓显示也一模一样，那我觉得这种小公司没必要呆下去了，屏幕都不一样大怎么可能显示一样，最多只能保持样式一样

    2023-10-11
    有用 1
    回复 3
    • H1HAO 🇨🇳
      H1HAO 🇨🇳
      2023-10-11
      补充一下，在css内page一定要写一个初始文字大小，一般是28rpx，这样在你未添加其它字体样式的时候，所有的字体大小都是默认值，并且不受系统和微信字体大小影响
      2023-10-11
      赞
      回复
    • 笑清风
      笑清风
      2023-10-11
      好的，谢谢大佬，我们设计给的ui不是标准的苹果6设计尺寸，需要计算rpx和px的比例，设计稿我看可以选择rpx,我可以直接选择rpx吗，但是有小数，还是需要按照px适配？
      2023-10-11
      赞
      回复
    • H1HAO 🇨🇳
      H1HAO 🇨🇳
      2023-10-16回复笑清风
      不用管设计稿是什么尺寸，就按ios6来进行开发，然后这种小数点你改成整数，一般是看ui的px来进行适配的，假设一个按钮高40px你就写80rpx
      2023-10-16
      赞
      回复
  • 柠檬
    柠檬
    01-13

    如果你字体差别很大，说明你没有设置下面内容

    安卓和ios肯定有一些差距，一般rpx越小比如10rpx，安卓和ios差距就很大，所以列表里最好不要padding-top:10rpx ,最好用height：120rpx, 值越大显示效果越相同

    page,.page{

        height: 100%;

        font-family: 'Microsoft YaHei';

        font-size: 30rpx;

    }



    01-13
    有用
    回复
  • 零²⁰²⁴
    零²⁰²⁴
    2023-10-10

    上个图看下效果呗，小程序自适应一般都是 rpx

    2023-10-10
    有用
    回复 8
    • 笑清风
      笑清风
      2023-10-10
      用的是rpx,左边是安卓，右面是苹果
      2023-10-10
      赞
      回复
    • 零²⁰²⁴
      零²⁰²⁴
      2023-10-10回复笑清风
      这两张图看起来只是文案的行高不太一样。另外微信字体大小设置是不会改变小程序的字体大小的，只会影响官方弹窗、toast 的字体大小。
      2023-10-10
      赞
      回复
    • 零²⁰²⁴
      零²⁰²⁴
      2023-10-10回复笑清风
      还是说你这个页面实际上不是小程序页面，而是内嵌的一个 h5 页？
      2023-10-10
      赞
      回复
    • 笑清风
      笑清风
      发表于移动端
      2023-10-10回复零²⁰²⁴
      是小程序的不是H5
      2023-10-10
      赞
      回复
    • 零²⁰²⁴
      零²⁰²⁴
      2023-10-10回复笑清风
      我感觉应该还是 UI 还原度不够的问题，字体其实不是大问题，UI还原度好的情况下，整体协调就行。你可以拿着2架手机去同类型的其他小程序看看，对比下
      2023-10-10
      赞
      回复
    查看更多(3)
  • 郑钱花
    郑钱花
    2023-10-10

    就是该用rpx

    2023-10-10
    有用
    回复 7
    • 笑清风
      笑清风
      2023-10-10
      用rpx的话安卓看起来跟设计稿差别挺大的，可以说很丑，老板不满意
      2023-10-10
      赞
      回复
    • 郑钱花
      郑钱花
      2023-10-10回复笑清风
      首先确保安卓手机没有改手机的字体大小，然后你截图举例看看呢，开发了几十款小程序了，都没有你说的情况
      2023-10-10
      赞 1
      回复
    • 笑清风
      笑清风
      2023-10-10回复郑钱花
      rpx在安卓上也会随着字体变大而变大，我又蒙了，
      左边是安卓，右边是苹果
      2023-10-10
      赞
      回复
    • 郑钱花
      郑钱花
      2023-10-10回复笑清风
      确实如此，没有内边距，字体30rpx的效果如下
      2023-10-10
      赞
      回复
    • 郑钱花
      郑钱花
      2023-10-10回复笑清风
      猜测可能是系统字体不一样，导致的标点符号等等这些宽度不一致，还有就是分辨率这些问题。用rpx写本质上没错的。这种微小差别完全可以接受啊
      2023-10-10
      赞
      回复
    查看更多(2)
  • Code Weaver
    Code Weaver
    2023-10-10

    px字体大小不会变，rpx才会变

    2023-10-10
    有用
    回复 8
    • 笑清风
      笑清风
      2023-10-10
      我试过会变，大小不一样，难道是随着手机上字体大小变，还是分辨率的问题
      2023-10-10
      赞
      回复
    • Code Weaver
      Code Weaver
      2023-10-10回复笑清风
      没发现会变，除非你手机微信自己更改过字体大小。
      2023-10-10
      赞
      回复
    • Code Weaver
      Code Weaver
      2023-10-10回复笑清风
      rpx安卓问题 建议你检查下 安卓手机字体大小 是否有手动改过
      2023-10-10
      赞
      回复
    • 笑清风
      笑清风
      2023-10-10回复Code Weaver
      就是设置了字体大小，怎么阻止小程序跟着手机字体大小变啊，我看有人说好像现在不能阻止了
      2023-10-10
      赞
      回复
    • Code Weaver
      Code Weaver
      2023-10-10回复笑清风
      没办法改，觉得丑 就是因为用户自己改了字体大小的原因。那是没办法的
      2023-10-10
      赞
      回复
    查看更多(3)
请 登录 后发表内容
相关问题
相关文档