快捷菜单
常用功能一站直达
比例问题
最后更新于:
比例问题
问题
1现在有个问题：
2
3我14存办公电脑，24存家用电脑的都没问题呀，无痕也测了没问题呀
4
5有的同学打开博客，首页壁纸和下方的文章卡片好像布局存在问题，有重合啥的。。。
6
7你让ai写，肯定没让他 电脑端严格16：9，手机端9：16
8通常安卓手机是20：9，苹果19.8：9
9就好像你在一张16：9的纸上画画，每个东西的的布局，要大小和谐，
10不是看你14寸还是24寸分辨率
11分辨率只是纸的大小
12比例要对啊
回答
你说得对：关键是比例，不是 14/24 寸。
根因是以前布局按「宽度断点 + 整屏 100vh」写的，竖屏（约 9:16 / 20:9）上等于在一张竖纸上硬铺满整页壁纸，再把文章区用 -2vh 往上拽，卡片顶就被壁纸盖住了。你那边 16:9 宽屏刚好不踩雷。
已改成按视口比例分「纸面」：
| 比例 | 横幅高度 |
|---|---|
| 横屏 ~16:9 | 约 48svh（半屏感） |
| 竖屏 ~9:16 / 20:9 | 约 38svh（把首屏留给文章） |
| 矮横屏手机 | 再压矮一点 |
同时：波浪已关时不再负 margin 上拉；文章区层级高于壁纸。
已推到远程。部署后让同学用手机无痕打开首页看壁纸底边和卡片顶是否还叠在一起。
📡
- 比例问题 2026-07-31
- 站点维护页面 2026-07-30
- vitepress语法 vs hugo短代码 2026-07-30
