给小屏幕留出阅读空间
这一版把 320px 宽的屏幕作为排版下限。屏幕窄的时候,比起展示更多内容,更需要保证每一段文字能顺畅地读下去。
让宽度跟着屏幕走
正文没有固定的像素宽度。容器在宽屏上居中并限制最大宽度,到了手机上自然缩小,两边只留必要的阅读边距。
标题可以换行,摘要也不做强制截断。这样既不会因为标题稍长就挤出屏幕,也不用为了凑齐某个高度而省略句子。
把横向滚动留给代码
普通文字会自动换行。代码保留原来的缩进和行结构,放在可以独立横向滚动的区域里,避免一行代码撑宽整张页面。
.page {
max-width: 680px;
margin: 0 auto;
}
少依赖新特性
主体排版使用普通文档流和媒体查询,不依赖复杂布局。字号和边距都给出明确的基础值,让旧一些的浏览器也能显示完整内容。
页面没有固定在屏幕上的浮层,小屏幕上的可用空间可以尽量留给正文。