V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
MuscleOf2016
V2EX  ›  前端开发

想问前端大佬问题, iphone7 iphone7p iphoneX 你们是统一字体大小吗?

  •  
  •   MuscleOf2016 · 2019-01-11 12:56:58 +08:00 · 4237 次点击
    这是一个创建于 2142 天前的主题,其中的信息可能已经有所发展或是发生改变。

    因为现在代码 iphone7 iphone7p iphoneX 的字体大小都是一致的,没有 js 去动态计算。

    不过 UI 对这样的效果不满意,UI 用 7 为尺寸设计的 UI 图片,放到 7p 上看,觉得代码实现的页面字体偏小。

    我的解释是:7 尺寸的图片到 7p 上会放大,导致看上去字体变大了,代码上字体是写的固定的。

    像问问大家,你们 iphone7 iphone7p iphoneX 字体都是一样大的吗,还是代码根据分辨率动态的计算虚啊

    15 条回复    2019-01-16 11:04:00 +08:00
    MuscleOf2016
        1
    MuscleOf2016  
    OP
       2019-01-11 12:57:44 +08:00
    主要想参考下大家的项目,一般有必要去动态的算吗
    dremy
        2
    dremy  
       2019-01-11 12:58:28 +08:00 via iPhone
    css 自适应布局了解一下,rem,vw 作单位可解
    zzeff
        3
    zzeff  
       2019-01-11 13:41:53 +08:00
    跟设计师沟通清楚展现上的需求就好了。
    话说回来设计师应该也要有意识说他的产出物在常见屏幕上的表现应该是怎样的,敝司设计小哥哥就会这么做(长期被他虐,惨。
    iTakeo
        4
    iTakeo  
       2019-01-11 13:44:35 +08:00
    不都是 rem 的吗?
    MuscleOf2016
        5
    MuscleOf2016  
    OP
       2019-01-11 13:49:09 +08:00
    @dremy vw 是可以适应,现在用的 rem 7,7p 的根元素大小都 16px 嘛,字体大小都一样的
    MuscleOf2016
        6
    MuscleOf2016  
    OP
       2019-01-11 13:50:06 +08:00
    @iTakeo rem 在 7,7p 上计算后的不都是一样的 px,除非手动改根元素 font-size
    MuscleOf2016
        7
    MuscleOf2016  
    OP
       2019-01-11 14:36:36 +08:00
    @zzeff 哈哈。
    iTakeo
        8
    iTakeo  
       2019-01-11 14:52:56 +08:00
    @MuscleOf2016 谁说的,7 和 7p 的分辨率都不一样,rem 大小肯定也不一样啊
    MuscleOf2016
        9
    MuscleOf2016  
    OP
       2019-01-11 15:40:15 +08:00
    @iTakeo 你们应该是 js 根据分辨率计算 rem 吧,最终算出来的 px 不一样。
    helone
        10
    helone  
       2019-01-11 15:42:00 +08:00
    css 写大小直接用 rem,涉及到布局用 vw
    MuscleOf2016
        11
    MuscleOf2016  
    OP
       2019-01-11 15:44:57 +08:00
    @helone 假设 7 和 7p 同一个字体大小 会写一样的 rem 值吗,这样最终计算下来的 px 大小也是一样的。
    MuscleOf2016
        12
    MuscleOf2016  
    OP
       2019-01-11 15:46:37 +08:00
    @helone 按我理解因为根元素都是 16px,写一样的 最终字体大小都一样,要想 7p 显示效果好点,7p 上字体 rem 值会比 7 大点,通过 js 计算分辨率。
    helone
        13
    helone  
       2019-01-11 15:50:44 +08:00
    @MuscleOf2016 都用 rem 后根据屏幕宽度或者其他参数计算根元素的 font-size 百分比
    iTakeo
        14
    iTakeo  
       2019-01-11 16:26:33 +08:00
    @MuscleOf2016 不是 js,用 vw 配合 rem 来写的
    redbuck
        15
    redbuck  
       2019-01-16 11:04:00 +08:00
    @MuscleOf2016

    你用 rem 的话,根元素字体大小当然要动态计算啊.
    要搞清楚用 rem 实际上就是用百分比,只是比百分比好计算,而且 css 的百分比不统一(比如 padding-top 的百分比是按宽度来算的...).
    搞清楚这点了,你说 16/375 会等于 16/414 吗?

    最佳实践其实随便百度就有了,你用淘宝的方案就可以.

    1. 引用 flexible.js(淘宝是把根元素字体大小设置为 device-width 的十分之一的).最好自己手动加个 device-width=1 的 viewport 标签,统一按 dpr 为 1 计算,1px 的问题很多解.
    2. 使用 px2rem 转换你的 css 源码中的尺寸.
    2. 设计稿按 ip6,375*667 的来.(蓝湖之类的工具设置一下).
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2414 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 01:19 · PVG 09:19 · LAX 17:19 · JFK 20:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.