112 lines
2.9 KiB
SCSS
112 lines
2.9 KiB
SCSS
// ========================================================
|
||
// 1. 变量与断点定义 (集中管理)
|
||
// ========================================================
|
||
$breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '2k': 2560px, '4k-40': 3800px, '4k': 3840px );
|
||
|
||
// 字号常量
|
||
$font-size-small: 14px; // 手机/平板基准
|
||
$font-size-standard: 16px; // 桌面基准 (1024px - 3840px)
|
||
$font-size-4k-base: 24px; // 4K 触发点字号
|
||
|
||
// 容器配置
|
||
$container-paddings: 1rem;
|
||
|
||
// ========================================================
|
||
// 2. 媒体查询 Mixin
|
||
// ========================================================
|
||
@mixin respond-to($breakpoint) {
|
||
// 如果是预定义的 key (如 'mobile')
|
||
@if map-has-key($breakpoints, $breakpoint) {
|
||
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
||
@content;
|
||
}
|
||
}
|
||
// 如果是传入的具体数值 (如 3840px)
|
||
@else {
|
||
@media (min-width: $breakpoint) {
|
||
@content;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ========================================================
|
||
// 3. 核心响应式逻辑
|
||
// ========================================================
|
||
:root {
|
||
// --- [阶段 A] 默认状态 (手机/小屏幕) ---
|
||
font-size: $font-size-small;
|
||
// --- [阶段 B] 1024px 以上到 4K 之前：保持标准 16px ---
|
||
@include respond-to('tablet') {
|
||
font-size: $font-size-standard;
|
||
}
|
||
// --- [阶段 C] 大于 4K：开启线性增长 ---
|
||
@include respond-to('4k') {
|
||
/* 逻辑：从 3840px 开始，字号从 24px 线性向上。
|
||
公式：(24 / 3840) * 100vw = 0.625vw
|
||
*/
|
||
font-size: 0.625vw;
|
||
}
|
||
}
|
||
|
||
/* --- 全局布局容器适配 --- */
|
||
// 其中 4k-40 为准 4K, 以适配 PC 端部分浏览器最大化时边框占位从而影响到 4K 宽度判定
|
||
.container {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
padding: 0 $container-paddings;
|
||
box-sizing: border-box;
|
||
|
||
@include respond-to('mobile') {
|
||
max-width: 720px;
|
||
}
|
||
|
||
@include respond-to('tablet') {
|
||
max-width: 960px;
|
||
}
|
||
|
||
@include respond-to('desktop') {
|
||
max-width: 1800px;
|
||
}
|
||
|
||
@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;
|
||
}
|
||
}
|
||
|
||
// ========================================================
|
||
// 4. 工具类与组件样式
|
||
// ========================================================
|
||
/* 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放 */
|
||
.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;
|
||
} |