@befe/brick-comp-grid

2021 BREAKING CHANGES

• 不再支持 props.style （此前的支持是由于不恰当的 props 传递造成）
  • 见 /main/getting-started 中 FAQ.组件原则上不支持 props.style

概念澄清

Responsive Web Design by Ethan Marcotte at 2010

• Fluid Grids by Ethan Marcotte at 2009
• media query
• flexible media (image, video i.e)

Adaptive web design / adaptive delivery

• CSS media query 技术（仅针对有限几种预设的屏幕尺寸设计）
• 用 Javascript 来操作 HTML 内容
• 在服务器端操作 HTML 内容（比如为移动端减少内容，为桌面端提供更多内容）
• https://venturebeat.com/2013/11/19/responsive-design-adaptive/
• https://en.wikipedia.org/wiki/Adaptive_web_design

Classical Grid / Typographic Grid / Fixed-Width Grid

• https://trydesignlab.com/blog/grids-ui-ux-graphic-design-quick-history-5-amazing-tips/
• https://visme.co/blog/layout-design/
• https://zh.wikipedia.org/wiki/%E6%A0%85%E6%A0%BC%E8%AE%BE%E8%AE%A1

沟通中被混淆的概念

• Grid 对开发来说通常指的是 Fluid Grid，而对于设计师来说 Grid 更多是 Typographic Grid 上的理解，但没关系，如果容器 width fixed 两者就一致了
• 常见于和设计师的沟通中，我们口中的“自适应”，往往只是狭义上的“子物件宽度随父容器宽度变化”，这常常也就是 Fluid Grid 随其 Container 变化
• Responsive Web Design 直译为 “自适应网页设计” 或 “响应式网页设计” 其实都没问题
• 常见的误解是将 Responsive Web Design 片面地理解为 Fluid Grid （内容随容器宽度变化）

web layout design comparison

• Fluid aka Liquid

  Liquid (also called "Fluid") is characterized by scaling the width of parts of the design relative to the window. It tends to fail when the window is much smaller or much larger than it was originally designed for.

• Adaptive

  Adaptive is characterized by having defined layouts for different resolutions. Within each layout, resizing the window does not change the layout.

• Responsive

  Responsive is characterized by having defined layouts for different resolutions. Within each layout, the design is liquid and resizes the width of elements relative to the changing window size. You can think of Responsive as a series of Liquid layouts.

• Static

  Static layouts are the traditional web: one design that sits in the center of the page and requires horizontal scrolling if the window is too small for it. M dot sites are the traditional answer to this, providing a wholly separate site for a lower resolution - and all the work of creating a separate site.

• 参考阅读

  • https://popart-studio.medium.com/fluid-vs-adaptive-vs-responsive-design-62de51e036bd
  • https://learn.onemonth.com/responsive-vs-adaptive-vs-fluid-design/#:~:text=Fluid%20design%20has%20the%20same,re%20viewing%20the%20site%20on.&text=It%20adjusts%20to%20whatever%20device,at%2C%20same%20as%20responsive%20design.

Grid 组件

• 基于 Bootstrap Grid System
• 结果上 PageContainer / BlockContainer > Row > Col
• 一般来说使用 Fluid Grid 只在 container width 有一定限制时使用才有意义
  • fixed width container
  • proper min/max width limit width container
  • responsive page-container width, also need proper min/max width limit
• 关于 container 必须有限制，极端但直觉的例子，想像一下以下的情景
  • 从 100px 至 1000px 都用 1:1:1 布局
  • 在 48寸 32:9 超宽屏幕下全屏查看看一个宽度总是占整个屏幕的宽度的页面