CSS – RWD (Responsive Web Design) 概念篇

介绍

Only PC

以前是没有手机的, 只有电脑, 所以做开发, 只需要开发电脑版本就可以了.

Mobile Version

后来手机诞生, 有钱的公司就做两个版本, 一个手机版, 一个电脑版. 没钱的公司就只做电脑版.

Mobile Friendly

再后来手机越来越火, 没钱的公司也只能硬想办法做手机版了, 但没钱丫, 只能想出性价比最优的方案, RWD 概念就此诞生. 电脑设计自适应手机.

Mobile First

再再后来, 手机比电脑更火了, 于是变成手机设计自适应电脑.

总结, 什么是 RWD ?

RWD (Responsive Web Design) 就是一个网站的设计, 可以符合不同尺寸的屏幕显示. 电脑宽屏看了也整齐舒服, 手机小屏幕看了也可以整齐舒服.

RWD How It Work?

它是怎么做到的呢? 两个绝招:

1. Percentage

写 CSS 排版的时候, 不要写死 width, 改用 percentage, value depend on viewport (设备) width. 小屏幕看到的图就小一些, 大屏幕就大一些.

2. Breakpoint

只用 Percentage 还不足够打天下, 尺寸跨度太大的话, 需要改动整个排版布局, 才能确保美观, 比如手机一行显示 1 张图, 电脑 1 行显示 4 张图.

Breakpoint 指的就是跨度的极限. 在跨度内就用 Percentage.

举例: when viewport 小于 600px 1 row display 1 card, when more than 600px then 1 row display 4 cards. 600px 就是一个 breakpoint.

3. Dynamic Column & RWD font

Breakpoint 类似 if else, 写多了伤管理, 所以除了 Percentage 以外还有一些 CSS 特性, 能很好的在没有 Breakpoint 的情况下, 做出 "自适应" 效果.

比如:

Flex 的 flex-wrap 和 Grid 的 auto-fit 能实现 dynamic column.

Font 可以用 clamp() 来实现 RWD font,

小例子总结:

设定有 3 个 Breakpoint, 手机 (600px), 平板 (1080px), 电脑 (1366px)

在手机 Breakpoint 内, 布局是不改变的, 改变的只有 width, 通过 Percentage 来完成

而跨度到了平板或电脑, 布局就可以改变了, 比如字体大小, 间距等等. 同时它的 width 有着另一套 Percentage.

多版本 vs RWD

多版本的意思是, 针对不同的尺寸做不同版本.

RWD 方案的原则是尽可能只通过 CSS 来实现自适应.

如果没办法那就配合一些 HTML 结构的改动. 但这样已经开始破坏风水了. 再过分一点是配合 JavaSript 来实现.

RWD 的原则限制了它的能力, CSS HTML 能做的事情大部分就是排版布局. 所以网站比较适合 RWD 的方案, 毕竟网站大部分功能就是游览.

但如果是 Web App (control panel 之类的), 它的交互比较多, 电脑的交互式用 keyboard mouse, 手机是触屏.

它们的体验不可能通过简单 CSS 改变排版去实现自适应. 这种情况下 RWD 就不合适了. 反而完全做 2 个版本会更理想.

屏幕, 打印, 分辨率, 物理像素, 逻辑像素, Retina, DPI, PPI 是什么?

我觉得要理解 RWD, 最好先从了解屏幕基础开始.

建议先读完这篇 CSS – 屏幕, 打印, 分辨率, 物理像素, 逻辑像素, Retina, DPI, PPI 是什么?

Layout Grid / Grid-View

参考: W3Schools Responsive Web Design - Grid-View

Figma 在还没有 Auto Layout 功能以前, 是用 Layout Grid 来实现 RWD 的.

这个布局方式好像是 Bootsrap 带起的.

上面有提到, 要尽量用 percentage 来设置 width, Layout Grid 的概念就是把网站切成 12 个 column 和无数的 row, 然后设计师把元素 (图片, 卡片等等) 放入到 column 中. column 会随着 view port 的大小而进行伸缩.

当遇到 breakpoint 的时候, 可以通过修改 column 数量来改变布局. 这就是它大体的玩法.

参考:

Learn Bootstrap in 5 minutes | Responsive Website Tutorial | Code in 5

Learn Bootstrap in less than 20 minutes - Responsive Website Tutorial

Responsive Design – Tailwind CSS v2.0: From Zero to Production (Tailwind CSS 充分展现了如果处理 breakpoint)

Translating a Custom Design System to Tailwind CSS (虽然这篇是讲 Design System, 但是可以看看它的 RWD 部分, 也是 Grid Layout 和 breakpoint)

实现

更新: 04 June 2022: v5.1 以后不再使用 Flex 改而用 Grid 实现了

1. Bootstrap 是用 Flex 来实现 Layout Grid 的, Tailwind 则是 Grid (Recreate Bootstrap Grid System in Tailwind CSS)

Bootstrap 的结构

<div class="container">

  <div class="row g-2">

    <div class="col-6">

      <div class="p-3 border bg-light">Custom column padding</div>

    </div>

    <div class="col-6">

      <div class="p-3 border bg-light">Custom column padding</div>

    </div>

    <div class="col-6">

      <div class="p-3 border bg-light">Custom column padding</div>

    </div>

    <div class="col-6">

      <div class="p-3 border bg-light">Custom column padding</div>

    </div>

  </div>

</div>

1. 它一定要 container > row > col > content 这样用的. (注: col 不可以拿来 appy background-color 哦, 因为它还负责 padding 做 gutter)

2. bootstrap 的 container 不只用于 grid 也可以用在其它地方, 所以它默认有一个 padding 12px.

而 row 默认会减 margin 12, 就是为了抵消掉 container 的 padding.

3. 它的 gutter 是通过 col padding left rigth 实现的, 所以 by default 是这样的:

container padding 12px

row margin -12px

col padding left & right 12px

最后依然看到 gird margin 12px and gutter 24px

更具体的例子看这篇: CSS – Grid Layout Grid by Flex 和 Layout Grid by Grid 的部分.

Mobile First vs Desktop First

Tailwind 和 Bootstrap 5 都倾向于 Mobile First 开发. 就是先做 Mobile 版本, 然后在 mediq query 修改到 Desktop.

参考: Are you writing responsive CSS the wrong way?

其实这个没有绝对的答案. 视频给出了一个观点是.

mobile > desktop 往往是增加实现代码

desktop > mobile 往往是减少实现代码 (override)

所以 mobile > desktop 会更自然一些. 比如 mobile 不需要 sidebar. 所以 mobile 完全没有这段代码.

desktop 就用 media query 加一个进去.

但如果反过来做. 一开始有, media query 就需要加一个 display: none. 所以它需要 2 分代码. 而 mobile > desktop 只需要一份.

绝大部分情况下, 先做 mobile 没有问题, 然后慢慢添加 for desktop. 但如果有一些情况下是 modile "例外" 那么我建议 media query 针对 mobile 调整

总之, 当你需要写 "override" 而不是 "extends" 的时候就多注意. 很可能它就是 "例外"