琢磨响应式布局设计
2026-04-02 18:28这是一篇记录，不是专业或全面的响应式设计参考文章。
一些注意事项
网站元标签：
1<meta name="viewport" content="width=device-width;initial-scale=1">
盒模型调整：
1* {
2 box-sizing: border-box;
3}
相关资料参见：CSS 属性：box-sizing。
布局规划
这里的布局规划受可视宽度影响，与设备朝向无关。
完整布局
此前的布局是：
- 页头
- 网站标题
- 多语言
- 内容部分
- 正文（显示文章或其他的页面内容）
- 侧栏
- 头像
- 菜单（或者说其他页面的访问入口）
- RSS
- 深色浅色控制
- 分类列表
- 标签列表
- 文章目录（仅文章内显示）
- 页脚
- 版权和许可信息
- 搭建工具、框架的信息
把这样的布局作为完整布局，再进行一些调整：
- 正文：最大 960px
- 侧栏：固定在 240px
- 正文与侧栏的间距：20px
此时的宽度是 1220px = (960+240+20)px。
但我希望正文可以居中，侧栏靠右，这样页脚的内容可以居中显示。 由于正文的居中，左侧也需要留出和右侧一样的空间， 这样一来内容部分的宽度就不是 1220px，而是：
- 左侧由于对称需要预留 260px = (240 + 20)px
- 正文 960px
- 右侧侧栏 240px
- 正文和右侧侧栏间距 20px
总宽度达到 1480px = (960 + 2*260)px。
目前桌面环境上的屏幕宽度大多是 1920px，部分 2560px 甚至是 3840px，少量 1600px 依然在用。 1480px 的宽度“理论上”是通用的。
宽度不够
理论上够用，等于不够。 举个例子，放大 1.5 倍的 1920px，实际上宽度仅有 1280px。 更别提移动端那些尺寸十分随性的屏幕了。
简单的解决方法就是把侧栏隐藏。 隐藏侧栏不难，但侧栏上的部分功能和入口还是需要访问的，该怎么做？
一种比较常见的方案是在页头增加一个按钮，控制侧栏的显示和隐藏。 顺便为了统一观感，给多语言也做一个按钮和下拉框用于选择，显得干净整洁。
但做这样的功能必不可少的就是下面这个了：
“随便点一下其他地方就能把侧栏、下拉框之类的都关掉”的原理和实现。
顺带一提，实际写出来的代码可是一大堆监听器，前不久我还折腾过， 因此我直接否决了这个方案，琢磨出仅靠样式和良好的布局组织就能实现的方法：
- 头像可以直接隐藏或者缩小之后放在网站标题那一行的最右边
- RSS 与深色浅色控制按钮放在原本多语言的地方，在头像的左侧
- 另起一行横向放置多语言
- 分类、标签列表和目录不要了
- 菜单放在多语言一行，靠右
- 当宽度不足 960px 时，内容宽度跟随可视宽度或屏幕宽度。
当这篇文章发布的时候，上面所说的应该都已经做好了。