给小屏幕留出阅读空间

这一版把 320px 宽的屏幕作为排版下限。屏幕窄的时候,比起展示更多内容,更需要保证每一段文字能顺畅地读下去。

让宽度跟着屏幕走

正文没有固定的像素宽度。容器在宽屏上居中并限制最大宽度,到了手机上自然缩小,两边只留必要的阅读边距。

标题可以换行,摘要也不做强制截断。这样既不会因为标题稍长就挤出屏幕,也不用为了凑齐某个高度而省略句子。

把横向滚动留给代码

普通文字会自动换行。代码保留原来的缩进和行结构,放在可以独立横向滚动的区域里,避免一行代码撑宽整张页面。

.page {
  max-width: 680px;
  margin: 0 auto;
}

少依赖新特性

主体排版使用普通文档流和媒体查询,不依赖复杂布局。字号和边距都给出明确的基础值,让旧一些的浏览器也能显示完整内容。

页面没有固定在屏幕上的浮层,小屏幕上的可用空间可以尽量留给正文。