#Scss 响应式断点

// 导入Sass内置map模块（高版本Sass必备，用于断点映射表取值）
@use "sass:map";

// ========== 【第一部分：全局样式变量】==========
// 主题色变量
$primary-color: #1890ff;  // 主色调（蓝色）
$success-color: #52c41a;  // 成功色（绿色）

// 文字色变量
$text-primary: #1f2937;   // 主文字色（深灰，正文/标题）
$text-secondary: #6b7280; // 次要文字色（浅灰，说明/备注）

// 背景色变量
$bg-color: #f9fafb;       // 全局背景色（浅灰，页面底色）
$card-bg: #ffffff;        // 卡片背景色（白色，模块底色）

// 通用样式变量
$border-radius: 12px;     // 全局圆角值
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);  // 轻微阴影（卡片/按钮默认）
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); // 中等阴影（悬浮/突出模块）

// ========== 【第二部分：响应式断点配置】==========
$breakpoints: (
  "sm": 640px,   // 小屏设备（手机横屏/小平板）
  "md": 768px,   // 中屏设备（平板）
  "lg": 1024px,  // 大屏设备（笔记本/小屏显示器）
  "xl": 1280px   // 超大屏设备（大屏显示器/台式机）
);

// ========== 【第三部分：响应式混合宏】==========
/**
 * 向上适配混合宏：屏幕 ≥ 指定断点宽度 生效（移动端优先核心）
 * @param $breakpoint 断点别名（sm/md/lg/xl）
 */
@mixin media-up($breakpoint) {
  $width: map.get($breakpoints, $breakpoint);
  @media (min-width: $width) {
    @content;
  }
}

/**
 * 向下适配混合宏：屏幕 ≤ 指定断点宽度-1px 生效（补充适配）
 * @param $breakpoint 断点别名（sm/md/lg/xl）
 * 减1px：避免与media-up断点临界值重叠，防止样式冲突
 */
@mixin media-down($breakpoint) {
  $width: map.get($breakpoints, $breakpoint);
  @media (max-width: #{$width - 1px}) {
    @content;
  }
}

@import "./_variables.scss";

// ========== 1. 移动端默认样式（无媒体查询，基础样式） ==========
.box {
  width: 100%;          // 移动端宽度100%适配
  margin: 0 auto;       // 居中
  padding: 12px;        // 移动端内边距
  font-size: 14px;      // 移动端字体大小
  background: $card-bg;
  box-shadow: $shadow-sm;
}

// ========== 2. 屏幕 ≥640px（sm断点）生效 ==========
@include media-up(sm) {
  .box {
    padding: 16px;
    font-size: 15px;
  }
}

// ========== 3. 屏幕 ≥768px（md断点，平板）生效 ==========
@include media-up(md) {
  .box {
    width: 720px;       // 平板端固定宽度
    padding: 20px;
    font-size: 16px;
  }
}

// ========== 4. 屏幕 ≥1024px（lg断点，电脑）生效 ==========
@include media-up(lg) {
  .box {
    width: 960px;       // 电脑端固定宽度
    box-shadow: $shadow-md;
  }
}

// ========== 5. 屏幕 ≥1280px（xl断点，大屏）生效 ==========
@include media-up(xl) {
  .box {
    width: 1200px;      // 大屏端固定宽度
    padding: 24px;
  }
}

// 仅在 屏幕 ≤767px（md断点-1px，手机端）时生效
@include media-down(md) {
  .header {
    display: flex;
    flex-direction: column; // 手机端导航纵向排列
  }
}