全屏显示的方式
新写法：
这是顶部定义缩放的缩放比
:root { --base-scale: min(1, 100vw / 1920, 100vh / 1080); width: 100%; aspect-ratio: 1920 / 1080; }
布局缩放写法 - calc
比如这个外边距margin: 20px 等同于这个缩放 margin: calc(20 * var(--base-scale))；
.bs-box { padding: calc(30 / 1920 * 100%); }
// 等同于下面
.bs-box {
padding: calc(30 * var(--base-scale));
}
文本缩放写法 - clamp
比如这个内容字体大小 font-size: 16px 等同于这个缩放 font-size: clamp(14px, calc(0.83vw * var(--base-scale)), 18px)
.bs-txt { font-size: clamp(14px, calc(0.83vw * var(--base-scale)), 18px) }
以下是旧写法：
.all-screen-box{ width: 100%; height: 100vh; overflow: hidden; /* 使用padding-top保持比例 */ &::before { content: ""; display: block; padding-top: 56.25%; /* 1080/1920 = 56.25% */ } > *:not(::before) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (min-aspect-ratio: 1920/1080) { /* 宽屏处理 - 按高度计算宽度 */ width: calc(100vh * 1920 / 1080); margin: 0 auto; } }
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。