V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yantianqi
V2EX  ›  程序员

前端移动端布局有哪些好的方案?

  •  1
     
  •   yantianqi · 2019-07-19 17:28:10 +08:00 · 3410 次点击
    这是一个创建于 1953 天前的主题,其中的信息可能已经有所发展或是发生改变。

    移动端响应式布局有哪些好的处理方案,rem?

    13 条回复    2019-07-20 18:43:29 +08:00
    Hasel
        1
    Hasel  
       2019-07-19 17:50:52 +08:00
    rem+vh+media query
    dog
        2
    dog  
       2019-07-19 19:42:40 +08:00 via iPhone
    用过 px2rem 感觉不错
    Torpedo
        3
    Torpedo  
       2019-07-19 19:59:47 +08:00
    直接布局吧。rem 还是有缺点的
    yagokoro
        4
    yagokoro  
       2019-07-19 20:02:46 +08:00 via Android
    viewport + flex/grid,真的没必要用 rem 搞一层
    nwu2Cv8OZ2MZMg39
        5
    nwu2Cv8OZ2MZMg39  
       2019-07-19 20:07:47 +08:00
    vw/vh + media query
    meteor957
        6
    meteor957  
       2019-07-19 20:13:46 +08:00
    media query + rem
    learnshare
        7
    learnshare  
       2019-07-19 20:24:32 +08:00   ❤️ 2
    **坚决反对 px2rem**,以及任何包含 *缩放* 或 *重新计算* 的方案,不精确的值会带来很多麻烦。

    建议仅在文本相关的部分属性中使用 em/rem,列举如下:

    + font-size
    + line-height
    + letter-spacing
    + word-spacing

    其他使用 px,极少数场景下可以使用 vh/vw。

    ----

    移动端布局和 PC 端并没有太多差异,有一些细节需要注意:

    + 禁止缩放 `<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">`,使页面以实际显示分辨率显示
    + 由于设备距离人眼更近,需要更慎重的选择文字相关尺寸
    + (可能)需要适配触摸操作
    + 需要慎重考虑可交互元素(如按钮)的尺寸

    可以参考 https://material.io/design/https://getbootstrap.com/ 学习成熟的设计和实现方案。

    欢迎讨论 :)
    lk920724
        8
    lk920724  
       2019-07-19 20:32:59 +08:00
    vh vw
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

    }
    zqx
        9
    zqx  
       2019-07-19 20:50:27 +08:00 via Android
    em rem 适用于文字吧,主要作用是在不同尺寸屏幕上显示文字比例更友好,块级元素很少用到(我用 px, vw)
    zqx
        10
    zqx  
       2019-07-19 20:52:08 +08:00 via Android
    media 也不常用了,现在做的一个 hybird h5 是直接写 max-width: 420px,不管具体机型
    morethansean
        11
    morethansean  
       2019-07-19 21:23:40 +08:00
    media query 吧这年头别用 rem 了...
    kaka1
        12
    kaka1  
       2019-07-20 09:27:11 +08:00
    @zqx 那大屏幕怎么办
    gaoryrt
        13
    gaoryrt  
       2019-07-20 18:43:29 +08:00
    如果只考虑移动端的话,rem 应该是非常方便的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2652 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 02:01 · PVG 10:01 · LAX 18:01 · JFK 21:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.