现代响应式设计
简介
本文主要为探究前端在现代响应式中各种实现方式，并对这些方式进行一定的总结记录。
TL;DR
Generated by Notion AI
本文探讨了现代响应式设计中的各种实现方式，并总结了一些响应式设计的结论。不同类型的网站在设计的倾向性上差异较大，例如新闻等文本网站，在文字的考虑上会更多，而以图片视频为主的网站，则在布局上考虑更多。在实现方面，可以使用媒体查询对不同的断点进行调整，使用固定px大小或者rem, em单位来处理文字，使用vw, vh或em单位来处理布局。不推荐全局使用vw等单位。
响应式设计背景
早年设计 Web 时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。这是改变我们设计多设备网页的方式的思想。 — MDN https://developer.mozilla.org/zhCN/docs/Learn/CSS/CSS_layout/Responsive_Design
在早期的响应式设计中，更多的考虑的是不同的分辨率下屏幕空间的利用，大屏幕可以展示更多的内容。移动端只是稍小的屏幕罢了。
当时的解决方案主要有：
- 2006年：使用JavaScript在不同的屏幕分辨率下植入不同的Css样式文件（参考Cameron Adams - Resolution dependent layout）
- 2009年：Ethan Marcotte提出Fluid Grid，使用
target / context = result将具体像素改为百分比。
- 2012年：媒体查询在CSS3规范中被提及且后续逐步被实现，为后续响应式设计奠定了基础。
在现代的网页设计中，媒体查询和栅格系统已经是老生常谈的解决方案了。
当然随着移动网络的普及，移动端相比传统PC站点更需要考虑用户在手机（平板等）上的操作和阅读体验。
响应式方案实现
在聊设计方案之前，需确定设计方案的核心思想：更大的屏幕应承载更多的内容，而非更大的内容。
不同类型的网站在设计的倾向性上差异较大，例如新闻等文本网站，在文字的考虑上会更多，而以图片视频为主的网站，则在布局上考虑更多。
我会列出部分主流网站的响应式实现，主要观察字体，布局和交互方式的不同，并通过这些例子得出一些响应式方式实现的结论。
（以下示例均从各大网站上截取，实现均通过devtool观察得出，仅供参考）
纽约时报
- 布局：
- 标题宽度固定写死，居中显示。
- 移动端优先，大于移动端尺寸的屏幕使用媒体查询复写。
- 交互：
- 顶部菜单在移动端下转换为侧边栏
- 字体
- 大小使用rem相对
Github
- 交互：
- 顶部菜单在小屏幕下变为侧边栏
- 字体：
- 字体大小固定使用14px（没有找到这个css variable的出处，是个无关紧要的bug？）
- 布局：
- 侧边栏在小屏幕被隐藏，宽度达到断点后在正文处显示
淘宝
淘宝比较特殊，在移动端下访问会访问https://main.m.taobao.com/的域名，在pc端下会访问https://www.taobao.com/的主站域名。
主站
- 布局：
- 大屏幕下为3列，小屏幕为2列
- 字体
- 使用px
- 交互：
- 无区别
移动端
由于移动端下均访问m.taobao.com站点，所以使用 ipad 和 iphone XR进行对比
- 布局：
- 无区别
- 字体
- 使用vw
- 交互：
- 无区别
实现小结
- 纽约时报作为文字类网站代表，在文字处理上使用rem，github没有做任何处理。
- github的响应式实现较为中规中矩，只是在移动端交互上做了处理。
- 淘宝的响应式在移动端和pc端上直接使用2种不同站点承载，整体使用vw方案
纽约时报和Github在响应式设计处理上，针对每个元素每个断点上都有特别的处理和优化。淘宝则在网关处直接进行区分，移动端均使用vw处理，带来的问题就是无法满足屏幕越大，看到内容越多的原则。
总结
- 使用媒体查询对不同的断点，或是使用
prefers-color-scheme针对不同的theme做出精细化调整
- 取决于站点的不同类型，在布局上和文字处理上有不同的倾向
- 在布局上使用
vw,vh或em单位 - 在文字处理上使用固定
px大小或者rem,em单位
- 元素的内外边距需根据实际场景进行调整，单位不限。
- 为了满足更大屏幕更多内容的前提，全局使用vw等单位不可取。
技术上可以给出的方案
- 部分样式可以使用css variable，并使用媒体查询在不同场景下进行调整。
- 使用一些helper class（语义化css，参考bootstrap或tailwind）来辅助不同的断点逻辑
不推荐的方案
- 所有对样式文件做统一转换的响应式方案，例如postcss-px-2-vw或postcss-px-2-rem方案