V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
设计师推荐装备
WACOM 数位板
推荐阅读
版式设计基础教程 by 南云治嘉
版式设计全攻略 by 佐佐木刚士
free1978
V2EX  ›  设计师

2022 年,大家的网页设计标准是多宽?用 grid 系统吗?

  •  
  •   free1978 · 2022-12-12 11:20:43 +08:00 · 3558 次点击
    这是一个创建于 699 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我现在是按 1224 宽设计 8px 倍数,使用列宽 80 ,水槽宽 24 。 这样显示内容:80x12 + 24 x 11 = 1224 ,左右留出 margin 24 ,总宽是 1272 ,可以适应 1280 宽显示器。

    但是我这个宽总觉得用在后台管理界面,不够用。

    大家现在设计用多宽? 另外我发现普通网页双击 Safari ,都给自动把窗口设为 1324 宽,这有啥原因吗?

    11 条回复    2022-12-15 11:02:25 +08:00
    cheung
        1
    cheung  
       2022-12-12 12:24:15 +08:00
    1200
    zsj1029
        2
    zsj1029  
       2022-12-12 12:54:59 +08:00
    min width 1200
    纯 pc 不考虑移动优先
    数据展示依旧 table 为主,flex 布局
    ragnaroks
        3
    ragnaroks  
       2022-12-12 15:40:38 +08:00
    面向终端的话大屏设备 1440px/90rem ,小屏设备上 360px/22.5rem 。

    后台、面板之类的默认全宽。
    retrocode
        4
    retrocode  
       2022-12-12 15:47:33 +08:00
    一般都是 1200
    qzsi001
        5
    qzsi001  
       2022-12-12 16:15:05 +08:00
    grid 和 flex 之间的关系是互补,不是替代
    grid 纯粹是锦上添花,而不是他更好
    leedarmau
        6
    leedarmau  
       2022-12-12 18:31:31 +08:00
    @qzsi001  他说的 grid 是设计里面的栅格: https://zh.m.wikipedia.org/zh-hans/%E6%A0%85%E6%A0%BC%E8%AE%BE%E8%AE%A1

    不是 display: grid
    dufu1991
        7
    dufu1991  
       2022-12-13 13:01:46 +08:00
    我现在不管写 PC 还是 Mobile 都是自适应布局,不限制固定宽度了。限制宽度的页面感觉就是上古时期的,没看下去的欲望了。
    qzsi001
        8
    qzsi001  
       2022-12-13 14:48:38 +08:00
    @leedarmau #6 实际是指 Bootstrap 这种玩意?这个我还真不知道
    leedarmau
        9
    leedarmau  
       2022-12-13 17:28:22 +08:00
    @qzsi001 实际指的是一种设计理念:元素要不要按照规定好的来排列
    qzsi001
        10
    qzsi001  
       2022-12-14 10:05:42 +08:00
    @leedarmau #9 学到了!哈哈哈哈,这个我真的没了解过
    andyskaura
        11
    andyskaura  
       2022-12-15 11:02:25 +08:00
    flex 一把梭
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   945 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:05 · PVG 04:05 · LAX 12:05 · JFK 15:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.