V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
yantianqi
V2EX  ›  程序员

宽 1080px 的设计图,字体大小为 36px,在 360px 下字体大小为 12px 吗?

  •  
  •   yantianqi · 2018-01-21 00:03:47 +08:00 · 3687 次点击
    这是一个创建于 2531 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如果为 12px 字体太小了啊?
    是设计的问题还是什么问题?

    19 条回复    2018-01-24 14:39:02 +08:00
    CEBBCAT
        1
    CEBBCAT  
       2018-01-21 00:06:40 +08:00 via Android
    我不太懂你们设计的事儿,可我掰着指头算了算,确实该是 12 像素啊
    lkb
        2
    lkb  
       2018-01-21 00:16:04 +08:00 via iPhone
    等比例适配如果不对,就要 Ui 给定区间.该怎么适配.如在宽为 375 ~ 500,要在等比例基础上乘以系数 0.5,在 500 ~ 1000,要在等比例基础上乘以系数 1.2.例子是瞎举的.如果不用适配这么多,那么就不用管那么多,那推给 UI,设计的过小.
    rookie603
        3
    rookie603  
       2018-01-21 00:23:21 +08:00
    现在没人用 360px 的吧 最少也得做 720px 的了
    rookie603
        4
    rookie603  
       2018-01-21 00:23:45 +08:00
    手机界面最小字体不能低于 20px 的
    qiukong
        5
    qiukong  
       2018-01-21 02:22:29 +08:00
    [设计图] 这是个图片,宽高比例当然随着屏幕大小缩放,如果算下来肯定是 12px。
    如果你说的是 html 字体,那不管屏幕大小多少 px,字体大小都是固定的 36px。
    autoxbc
        6
    autoxbc  
       2018-01-21 06:07:47 +08:00 via iPhone
    不懂你们设计,我看网站写死字号都很傻,直接留空,浏览器就会读用户的默认设置,效果会更好

    如果不写死字号排版就会错位,那是前端水平不行
    yantianqi
        7
    yantianqi  
    OP
       2018-01-21 06:44:58 +08:00 via Android
    @qiukong 是要根据 1080px 的效果图,写移动端页面,字号写 rem,计算完后在 360 逻辑像素下为 12px,字体有点小吧?
    tank
        8
    tank  
       2018-01-21 08:15:08 +08:00 via Android
    @1x 的界面设计里 12px 的字不算太小啊,正文字号一般也就 13-16px,12px 的字号挺常见的
    ChefIsAwesome
        9
    ChefIsAwesome  
       2018-01-21 09:07:26 +08:00
    原图手机里打开,找你们设计过来,问他这字小不小。他要是说不小,就这么设计的,那就是这么设计的。
    Bardon
        10
    Bardon  
       2018-01-21 11:07:59 +08:00
    显示器大小不一致,dpi 不一致,你们这么算是会出问题的。
    yantianqi
        11
    yantianqi  
    OP
       2018-01-21 11:31:32 +08:00 via Android
    @Bardon 主要移动端,那应该怎么算
    meszyouh
        12
    meszyouh  
       2018-01-21 12:11:47 +08:00
    如果这只是移动端的设计稿,12px 没问题
    oswuhan
        13
    oswuhan  
       2018-01-21 15:53:22 +08:00
    10 楼说得对,具体的设备具体分析,前端不可能有后端那样的抽象程度。对于移动应用来说,稍微复杂点的 UI,很难一套设计稿兼容所有设备,必须根据 DPI、屏幕尺寸、屏幕形状出多套设计稿。移动网页稍微简单点,可以通过设置 viewport 来禁止缩放,不缩放的方案也有,谷歌百度一大堆,根据不同的缩放方案出设计稿。
    joeaaa
        14
    joeaaa  
       2018-01-21 20:37:34 +08:00 via iPhone
    这里是不是要用 em 了
    msg7086
        15
    msg7086  
       2018-01-22 09:46:41 +08:00
    不能简单等比例缩小的……
    yantianqi
        16
    yantianqi  
    OP
       2018-01-22 23:16:47 +08:00 via Android
    @msg7086 那应该?
    msg7086
        17
    msg7086  
       2018-01-23 03:07:15 +08:00
    @yantianqi 根据需求重新设计?当然我说的也不是像素的问题而是设备大小。如果是同一款设备,1080px 的 36px 转成 360px,那的确是 12px。如果是从显示器变成手机屏幕,那就算是像素数相同也不能直接套了。
    jisi724
        18
    jisi724  
       2018-01-23 08:53:01 +08:00
    如果有设计稿的话一套桌面一套移动端是合理的,具体的字号要求可以问设计师要 styleguide, 字号结合 rem 缩放基本满足需求。

    如果没有移动端设计稿,可以试试不同设备自己感觉,不要单纯依赖缩放计算。根据项目的经验我觉得至少 16px 看起来是舒服的。。。
    davin
        19
    davin  
       2018-01-24 14:39:02 +08:00
    @yantianqi 有 px to rem 这种工具的,前端应该知道
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5503 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 07:04 · PVG 15:04 · LAX 23:04 · JFK 02:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.