This commit is contained in:
2026-04-25 22:51:57 +08:00
7 changed files with 155 additions and 147 deletions

View File

@@ -1,7 +1,7 @@
// ========================================================
// 1. 变量与断点定义 (集中管理)
// ========================================================
$breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '4k': 3840px );
$breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '2k': 2560px, '4k-40': 3800px, '4k': 3840px );
// 字号常量
$font-size-small: 14px; // 手机/平板基准
@@ -49,6 +49,7 @@ $container-paddings: 1rem;
}
/* --- 全局布局容器适配 --- */
// 其中 4k-40 为准 4K, 以适配 PC 端部分浏览器最大化时边框占位从而影响到 4K 宽度判定
.container {
width: 100%;
margin: 0 auto;
@@ -66,7 +67,15 @@ $container-paddings: 1rem;
@include respond-to('desktop') {
max-width: 1800px;
}
// 4K 以上容器随之线性扩大
@include respond-to('2k') {
max-width: 2560px;
}
@include respond-to('4k-40') {
max-width: 3800px;
}
// 当容器等于 4K 时,随之线性扩大
@include respond-to('4k') {
// 保持容器宽度占比:(3600 / 3840) * 100vw = 93.75vw
max-width: 93.75vw;