78 lines
1.6 KiB
CSS
78 lines
1.6 KiB
CSS
: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;
|
||
} |