网页基础 / 学习笔记

用 CSS 做一个适合手机阅读的页面

从宽度、字号和留白入手，建立舒适的阅读节奏。

正文宽度需要控制

大屏幕上让每一行文字横跨整个屏幕，会增加视线回到下一行的负担。可以为内容容器设置最大宽度，并在两侧保留边距；小屏幕则让容器自然缩小，避免固定宽度导致横向滚动。

中文正文可以从 16 到 18 像素的字号、约 1.8 的行高开始尝试，再根据字体和设备调整。标题、正文、辅助信息形成清楚的层次即可，不必在一个页面里使用过多字号。

文章列表适合用 Grid 排版。宽屏可以分成两列，窄屏改为一列。应根据内容是否放得下选择断点，而不是只对照某一款手机的尺寸。卡片标题换行后也应保持正常间距。

用较长标题、不同长度的摘要和放大后的文字检查布局。除了鼠标悬停状态，还要提供清晰的键盘焦点样式。减少不必要的动画，让阅读本身成为页面的中心。