添加了 Giscus，类似评论功能。

使用 Giscus 需要一个 GitHub 账号。 怎么用呢？点文章标题，进入文章页面，翻到页面底端时就会加载 Giscus 了。 Giscus 使用的是 GitHub 的 Discussions 功能，所以可能需要一些上网技巧才能加载出来。

这是一篇记录，不是专业或全面的响应式设计参考文章。

一些注意事项

网站元标签：

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 时，内容宽度跟随可视宽度或屏幕宽度。

当这篇文章发布的时候，上面所说的应该都已经做好了。

设置方法

在火狐浏览器的地址栏输入 about:config 进入高级首选项，点 “接受风险并继续” 按钮。

在搜索栏输入 toolkit.zoomManager.zoomValues，这影响设置选项中的可选缩放列表，以及鼠标滚轮能滚动到的缩放等级。 此项的值应该类似于 .3,.5,.67,.8,.9,1,1.1,1.2,1.33,1.5,1.7,2,2.4,3,4,5， 其实就是一个逗号分隔的列表，小数数值省略了整数部分的 0，设置两位小数也是可行的。

此外还有两项：zoom.maxPercent 和 zoom.minPercent，这两项控制鼠标滚轮能达到的最大和最小缩放等级， 这里设置的数值对应百分比数值，例如 50 就是 50% 缩放，需要对照上面一项的值设置一个正确的值。

发现过程

昨天（3/31）的晚些时候更新了一下系统，火狐也从 148 更新到了 149。

浏览完更新日志，玩了玩新功能（应用内分屏），就没再关注。

直到今天和朋友讨论剪贴板问题的时候，我觉得 KDE Bugtracking System 页面内容太小，就习惯性地滚了一下滚轮放大页面。

这一滚我就发觉不对劲，怎么页面缩放从 100% 到 110%、120%，然后是 133%、150%、170%、200%了？ 我印象里火狐的缩放在 100% 到 200% 段一直都是 10% 步进啊。

我一惊，连忙跑到设置页（about:preferences）去搜索了一下“缩放”，点开下拉列表一看，原来这里也变了。

抱着试试看的心态，我打开了高级首选项页（about:cofig），搜索“zoom”。 翻找到页面最底部的时候，我看到了几个熟悉的东西：

哈，原来在这里！

由于我手头没有 148 版本的 Firefox 用于对比，所以我不确定这是火狐的愚人节笑话还是真的改了。

4/2 更新：可以肯定是火狐更改了默认的缩放级别。