唐山企业调整外贸网站小字时,应同时检查默认状态看不看得清,以及读者放大后能不能继续操作。把所有px换成rem并不自动解决问题,根字号、局部覆盖和布局都可能改变结果。先定项目要求,再取真实计算值和放大表现。
先做一个可解释的单位比较
<style>
html { font-size: 16px; }
.demo-px { font-size: 12px; }
.demo-rem { font-size: .75rem; }
</style>
<p class="demo-px">固定CSS像素示意</p>
<p class="demo-rem">根字号比例示意</p>rem相对根元素字号。这个示例在根字号16px时,两段计算为12px;若仅把根字号改为20px,rem段计算为15px,px段仍为12px。这是单位计算演示,不表示浏览器缩放、系统字体或整页布局都只受这一处控制。
把单位计算与真实阅读分成两张表
| 条件 | 12px段 | 0.75rem段 |
|---|---|---|
| 根字号16px | 12px | 12px |
| 根字号20px | 12px | 15px |
| 整页缩放或系统设置 | 需按环境实际复测 | 同样需实际复测 |
小屏与放大都查内容有没有被截掉
- 按真实页面取可见文字计算字号,找出局部覆盖。
- 检查正文、按钮、表注及页脚,不只看标题。
- 放大后检查重叠、裁切与悬浮组件遮挡。
- 表格可以有明确的局部滚动,但页面不应无故横向撑开。
- 修改单位后复查根字号及继承关系,避免反而缩小。
1约定明确最低值与阅读要求。
2计算查看真实样式结果。
3放大复查内容与操作。
4回归覆盖手机、页脚和固定组件。
全部用rem就一定符合要求吗?
不一定,要看根字号、比例和覆盖规则,并按实际计算值验收。
截图看着清楚就够吗?
截图不能代替字体设置、放大和真实操作检查。