CSS – RWD (Responsive Web Design)

2024-01-01 19:10:16

介绍

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

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

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

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

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

两个概念.

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 越多开发/维护成本就越高. 产品负责人需要把控好这些.

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

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

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">