2026-02-26 20:26:22 +08:00
|
|
|
|
// 响应式尺寸工具
|
|
|
|
|
|
// 基准设计稿宽度 1920px
|
|
|
|
|
|
// clamp(min, preferred, max) 在 1280px~3840px 间线性缩放
|
|
|
|
|
|
|
|
|
|
|
|
// 字体
|
2026-02-26 21:59:15 +08:00
|
|
|
|
@font-hero: clamp(22px, 2.7vw, 72px); // 首页大标题
|
2026-02-26 20:26:22 +08:00
|
|
|
|
@font-title: clamp(24px, 2.2vw, 52px); // 各页标题
|
2026-02-26 21:59:15 +08:00
|
|
|
|
@font-desc: clamp(13px, 1.3vw, 30px); // 描述文字
|
2026-02-26 20:26:22 +08:00
|
|
|
|
@font-nav: clamp(12px, 1vw, 18px); // 导航文字
|
|
|
|
|
|
@font-btn: clamp(12px, 1vw, 18px); // 按钮文字
|
|
|
|
|
|
@font-small: clamp(11px, 0.65vw, 15px); // 小字
|
|
|
|
|
|
|
|
|
|
|
|
// 间距
|
|
|
|
|
|
@gap-section: clamp(40px, 5vw, 120px); // 左右两侧间距
|
|
|
|
|
|
@gap-content: clamp(30px, 4vw, 100px); // 内容区左右内边距
|
|
|
|
|
|
@gap-items: clamp(16px, 1.5vw, 40px); // 元素间距
|
|
|
|
|
|
|
|
|
|
|
|
// 手机图片尺寸（保持约 1:1.85 比例）
|
|
|
|
|
|
@phone-w-main: clamp(160px, 14vw, 320px);
|
|
|
|
|
|
@phone-h-main: clamp(296px, 25.9vw, 592px);
|
|
|
|
|
|
@phone-w-side: clamp(130px, 11vw, 260px);
|
|
|
|
|
|
@phone-h-side: clamp(240px, 20.4vw, 480px);
|
|
|
|
|
|
|
|
|
|
|
|
// 内容区最大宽度（4K下不超过屏幕70%）
|
|
|
|
|
|
@content-max: min(1400px, 72vw);
|
|
|
|
|
|
|
|
|
|
|
|
// 导航高度
|
|
|
|
|
|
@nav-h: clamp(56px, 8vh, 90px);
|
|
|
|
|
|
@nav-px: clamp(24px, 8vw, 200px);
|
