V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
varius
V2EX  ›  问与答

从 Flutter 转前端,请教 React 写布局的方式

  •  
  •   varius · 2020-02-06 22:07:27 +08:00 · 1770 次点击
    这是一个创建于 1743 天前的主题,其中的信息可能已经有所发展或是发生改变。

    RT。小弟最近从 Flutter 转前端,学习了 React+Material-UI,但是对布局及尺寸还不是特别熟悉。 向各位大佬请教,如果要实现一个类 Column 的布局,从上到下分四个部分,并且每个部分高度的占的百分比不一样,目前知道只知道可以每个 Div 写 height:*vh,但是感觉这个方案还是非常原始呀? 如何实现比较通用呢?

    13 条回复    2020-02-07 20:57:41 +08:00
    manami
        1
    manami  
       2020-02-06 22:16:33 +08:00 via Android
    你说的是 CSS 的问题,与 React 无关……
    murmur
        2
    murmur  
       2020-02-06 22:23:25 +08:00
    学一下 flex、媒体查询,别乱用 vh/vw/rem 这些,否则小米网站的手机版横屏就是最好的例子
    crysislinux
        3
    crysislinux  
       2020-02-06 22:31:27 +08:00 via Android
    楼上说得对,尤其是 vh,我认为简直是毒瘤
    CaHCO3
        4
    CaHCO3  
       2020-02-07 03:47:28 +08:00 via iPhone
    @murmur 哈哈哈哈,高手!
    yilingersier
        5
    yilingersier  
       2020-02-07 04:33:50 +08:00
    del1214
        6
    del1214  
       2020-02-07 09:23:39 +08:00
    逆行经脉,当心走火入魔
    varius
        7
    varius  
    OP
       2020-02-07 14:58:42 +08:00
    @murmur 谢谢大佬!请问需不需要用 Material-UI 的 Grid,Container 这些,还是直接用 CSS 写 Flex 布局
    varius
        8
    varius  
    OP
       2020-02-07 14:59:04 +08:00
    @yilingersier 非常感谢!请问需不需要用 Material-UI 的 Grid,Container 这些呢
    varius
        9
    varius  
    OP
       2020-02-07 14:59:17 +08:00
    @del1214 哈哈哈,生活所迫呀
    murmur
        10
    murmur  
       2020-02-07 15:08:01 +08:00
    @varius flex 布局是 css 基础的一部分,现在不掌握面试也跑不掉
    varius
        11
    varius  
    OP
       2020-02-07 17:08:05 +08:00
    @murmur 感谢回复! flex 的确要认真学一下,那一般开发应用是直接写 CSS,还是用那些包装了的呢
    murmur
        12
    murmur  
       2020-02-07 17:20:43 +08:00
    @varius css 要会写,而且很重要,不写 css 要么俗要么丑,内部用一下还可以,拿给公众是真的拿不出手
    varius
        13
    varius  
    OP
       2020-02-07 20:57:41 +08:00
    @murmur 谢谢大佬
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2762 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 12:00 · PVG 20:00 · LAX 04:00 · JFK 07:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.