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

View File

@@ -38,6 +38,16 @@
max-width: 1800px;
}
}
@media (min-width: 2560px) {
.container {
max-width: 2560px;
}
}
@media (min-width: 3800px) {
.container {
max-width: 3800px;
}
}
@media (min-width: 3840px) {
.container {
max-width: 93.75vw;

View File

@@ -1,78 +0,0 @@
:root {
/* --- 基础断点定义 (供参考) --- */
/* 手机: < 768px */
/* 平板: 768px - 1024px */
/* 桌面: 1024px - 1920px */
/* 4K屏: 3840px */
/* --- 核心字号缩放逻辑 --- */
/* 逻辑: 在移动端最小为 14px在 1024px 以上开始线性增长,到 4K 达到 24px */
/* 公式: clamp(最小值, 首选值, 最大值) */
font-size: 14px;
}
@media (min-width: 1024px) {
:root {
/* 1.2vw + 10px 是一个经过计算的动态值,确保 1024-3840 之间平滑过渡 */
font-size: clamp(16px, 0.35vw + 12.4px, 24px);
}
}
@media (min-width: 3840px) {
:root {
/* 针对 4K 以上屏幕,如果想继续缩放可保持 clamp想锁定则固定 24px */
font-size: 24px;
}
}
/* --- 全局布局容器 --- */
.container {
width: 100%;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
/* 这里的 1rem 会随着上面定义的 font-size 自动缩放 */
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1920px) {
.container {
max-width: 1800px;
}
}
@media (min-width: 3840px) {
.container {
max-width: 3600px;
}
}
/* 为当前激活的 nav-link增加加粗效果 */
.nav-link.active {
font-weight: bold;
color: var(--bs-primary) !important;
border-bottom: 2px solid var(--bs-primary);
}
.p-r-t {
position: relative;
top: -1px;
}
.w-1r {
width: 1rem;
}
.h-1r {
height: 1rem;
}

View File

@@ -1 +1 @@
@charset "UTF-8";:root{font-size:14px;}@media(min-width:1024px){:root{font-size:16px;}}@media(min-width:3840px){:root{font-size:.625vw;}}.container{width:100%;margin:0 auto;padding:0 1rem;box-sizing:border-box;}@media(min-width:768px){.container{max-width:720px;}}@media(min-width:1024px){.container{max-width:960px;}}@media(min-width:1920px){.container{max-width:1800px;}}@media(min-width:3840px){.container{max-width:93.75vw;}}.w-1r{width:1rem;}.h-1r{height:1rem;}.nav-link.active{font-weight:bold;color:var(--bs-primary)!important;border-bottom:2px solid var(--bs-primary);}.p-r-t{position:relative;top:-1px;}mg-0{margin:0 auto;}
@charset "UTF-8";:root{font-size:14px;}@media(min-width:1024px){:root{font-size:16px;}}@media(min-width:3840px){:root{font-size:.625vw;}}.container{width:100%;margin:0 auto;padding:0 1rem;box-sizing:border-box;}@media(min-width:768px){.container{max-width:720px;}}@media(min-width:1024px){.container{max-width:960px;}}@media(min-width:1920px){.container{max-width:1800px;}}@media(min-width:2560px){.container{max-width:2560px;}}@media(min-width:3800px){.container{max-width:3800px;}}@media(min-width:3840px){.container{max-width:93.75vw;}}.w-1r{width:1rem;}.h-1r{height:1rem;}.nav-link.active{font-weight:bold;color:var(--bs-primary)!important;border-bottom:2px solid var(--bs-primary);}.p-r-t{position:relative;top:-1px;}mg-0{margin:0 auto;}

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;