CSS – RWD (Responsive Web Design) 概念篇

介绍

Only PC

从前是没有手机和平板的, 只需要开发电脑 1 个版本就足够了.

Mobile Version

后来有了手机, 有钱的公司就做 2 个版本, 1 个手机, 1 个电脑. 没钱的依旧电脑版而已.

Mobile Friendly

手机越来越火, 没钱的公司也只好用廉价的方案, 所以就有了 RWD 的概念, 让电脑版本"兼容" 手机.

Mobile First

后来手机反而比电脑还火了, 所以是优先开发手机版本在 "兼容" 电脑版本.

什么是 RWD ? 

RWD (Responsive Web Design) 就是让同一个网站, 同时适应不同尺寸的设备. 

RWD How It Work?

两个概念. 

1. Percentage

做排版的时候, 不要写死 width, 改用 percentage 依赖 viewport (设备) width. 小屏幕开到的图就小一些, 大屏幕就大一些.

2. Breakpoint

只用 percentage 是不足够的, 尺寸阔度太大的话 (比如手机, 电脑), 就需要改动整个排版, 比如手机一行显示 1 张图, 电脑 1 行 4 张图. 

breakpoint 指的就是阔度的极限. 在阔度内就用 percentage.

例子:

比如可以设定 3 个 breakpoint, 手机 (600px), 平板 (1080px), 电脑 (1366px)

在手机这个 breakpoint 内, 布局是不改变的, 改变的只有 width, 通过 percentage 来完成

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

breakpoint 越多开发/维护成本就越高. 产品负责人需要把控好这些.

多版本 vs RWD

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

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

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

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

如果是 Web App (control panel 之类的), 它的交互比较多, 而手机的交互和电脑的交互那完全是 2 回事. 

电脑是 keyboard mouse, 手机是触屏. 那体验不是简单通过 CSS 能实现自适应. 这种情况下 RWD 方法就不那么理想了. 反而完全分 2 个版本来做会更合适.

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

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

建议先读完这篇 

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)