Usage Guide：Claude Code 实战指南

モダンなメディア查询で响应式设计を極める

メディア查询は响应式デザインの基盤ですが、最新のCSS仕様では範囲構文やContainer Queriesなど強力な機能が添加されています。借助 Claude Code，モダンなメディア查询を有效地活用した样式を効率よく实现可以。

新しい範囲構文（Media Query Range）

> 最新のメディア查询範囲構文で、主要断点の样式を書いて。

/* 従来の書き方 */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding: 1.5rem; }
}

/* 新しい範囲構文（Level 4） */
@media (768px <= width < 1024px) {
  .container { padding: 1.5rem; }
}

/* ブレークポイントの体系的な定義 */
/* モバイル */
@media (width < 640px) {
  .grid { grid-template-columns: 1fr; }
}

/* タブレット */
@media (640px <= width < 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* デスクトップ */
@media (width >= 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ワイドスクリーン */
@media (width >= 1440px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

Container Queries

> Container Queries使用...的响应式カード组件创建。

/* 親コンテナの定義 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* コンテナサイズに応じたスタイル */
.card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

@container card (width < 300px) {
  .card {
    grid-template-columns: 1fr;
  }
  .card__image {
    aspect-ratio: 16 / 9;
  }
}

@container card (300px <= width < 500px) {
  .card {
    grid-template-columns: 120px 1fr;
  }
  .card__image {
    aspect-ratio: 1;
  }
}

@container card (width >= 500px) {
  .card {
    grid-template-columns: 200px 1fr;
    padding: 1.5rem;
  }
  .card__title {
    font-size: 1.25rem;
  }
}

用户配置系メディア查询

/* ダークモード */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a2e;
    --text-color: #eee;
    --card-bg: #16213e;
  }
}

/* アニメーション軽減 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* コントラスト向上 */
@media (prefers-contrast: more) {
  :root {
    --border-color: #000;
    --text-color: #000;
  }
  .btn {
    border: 2px solid #000;
    font-weight: bold;
  }
}

/* 透明度低減 */
@media (prefers-reduced-transparency) {
  .overlay {
    background: var(--bg-color);
    opacity: 1;
  }
}

JavaScriptとの联动

// メディア查询をJavaScriptで監視
function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mql = window.matchMedia(query);
    setMatches(mql.matches);

    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
    mql.addEventListener('change', handler);
    return () => mql.removeEventListener('change', handler);
  }, [query]);

  return matches;
}

// Usage example
function ResponsiveLayout() {
  const isMobile = useMediaQuery('(width < 640px)');
  const isDark = useMediaQuery('(prefers-color-scheme: dark)');
  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');

  return (
    <div>
      {isMobile ? <MobileNav /> : <DesktopNav />}
      {/* コンテンツ */}
    </div>
  );
}

印刷用样式

@media print {
  /* ナビゲーション・フッター非表示 */
  nav, footer, .sidebar, .share-buttons {
    display: none !important;
  }

  /* リンクURLを表示 */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* ページ分割制御 */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
}

总结

メディア查询はCSS GridやFlexboxと組み合わせることで、真の响应式デザインを実現します。借助 Claude Code，Container Queriesやprefers-*系查询など最新仕様への支持も快速实现可以。アクセシビリティの観点から、prefers-reduced-motionへの支持は必須です。Container Queriesの最新仕様はCSS Containment Module Level 3。