مقایسه جامع Container Queries و Media Queries | طراحی ریسپانسیو مدرن در CSS

/* Media Queries – به کل صفحه نگاه می‌کند */  @media (max-width: 600px) {    .card {      display: block;    }    .card img {      width: 100%;    }  }  @media (min-width: 601px) {    .card {      display: flex;    }    .card img {      width: 200px;    }  }

/* تعریف کانتینر */  .card-container {    container-type: inline-size;  }     /* Container Queries – به اندازه والد نگاه می‌کند */  @container (max-width: 300px) {    .card {      display: block;    }    .card img {      width: 100%;    }  }  @container (min-width: 301px) {    .card {      display: flex;    }    .card img {      width: 120px;    }  }

<!-- این کارت در هر جایی که قرار بگیرد، بر اساس عرض والد خودش رفتار می‌کند -->  <div class="card-container" style="width: 250px;">    <div class="card">      <img src="image.jpg">      <div class="card-content">...</div>    </div>  </div>  <div class="card-container" style="width: 500px;">    <div class="card"> <!-- اینجا flex نمایش داده می‌شود -->      <img src="image.jpg">      <div class="card-content">...</div>    </div>  </div>

.product-container {    container-type: inline-size;    container-name: product;  }  .product-card {    background: white;    border-radius: 12px;    overflow: hidden;    transition: all 0.3s;  }  /* حالت باریک (موبایل داخل سایدبار) */  @container product (max-width: 300px) {    .product-card {      display: block;      text-align: center;    }    .product-image {      width: 100%;      height: 150px;    }    .product-title {      font-size: 16px;    }  }  /* حالت متوسط */  @container product (min-width: 301px) and (max-width: 500px) {    .product-card {      display: flex;      gap: 15px;    }    .product-image {      width: 120px;      height: 120px;    }  }  /* حالت پهن (برای main صفحه) */  @container product (min-width: 501px) {    .product-card {      display: flex;      gap: 20px;    }    .product-image {      width: 200px;      height: 200px;    }    .product-title {      font-size: 24px;    }  }

.weather-container {    container-type: inline-size;    container-name: weather;  }  .weather-widget {    background: linear-gradient(135deg, #667eea, #764ba2);    border-radius: 16px;    padding: 16px;    color: white;  }  /* حالت کوچک (برای سایدبار یا فوتر) */  @container weather (max-width: 200px) {    .weather-widget {      text-align: center;    }    .temp {      font-size: 24px;    }    .details {      display: none; /* جزئیات را مخفی کن */    }  }  /* حالت بزرگ (برای هدر یا main) */  @container weather (min-width: 201px) {    .weather-widget {      display: flex;      justify-content: space-between;      align-items: center;    }    .temp {      font-size: 48px;    }    .details {      display: block;    }  }

.nav-container {    container-type: inline-size;    container-name: nav;  }  .nav-menu {    display: flex;    gap: 10px;  }  .nav-item {    padding: 10px;  }  /* عرض کم: فقط آیکون‌ها */  @container nav (max-width: 300px) {    .nav-item span {      display: none;    }    .nav-item {      font-size: 24px;    }  }  /* عرض متوسط: متن + آیکون */  @container nav (min-width: 301px) and (max-width: 500px) {    .nav-item {      display: flex;      gap: 8px;    }  }  /* عرض زیاد: همه چیز */  @container nav (min-width: 501px) {    .nav-menu {      justify-content: space-around;    }  }

.gallery-container {    container-type: inline-size;  }  .gallery {    display: grid;    gap: 16px;  }  @container (min-width: 600px) {    .gallery {      grid-template-columns: repeat(3, 1fr);    }  }  @container (min-width: 400px) and (max-width: 599px) {    .gallery {      grid-template-columns: repeat(2, 1fr);    }  }  @container (max-width: 399px) {    .gallery {      grid-template-columns: 1fr;    }  }

.article-container {    container-type: inline-size;  }  .article {    padding: 20px;  }  @container (min-width: 800px) {    .article {      font-size: 18px;      padding: 40px;      max-width: 700px;      margin: 0 auto;    }    .article h1 {      font-size: 36px;    }  }  @container (max-width: 799px) {    .article {      font-size: 14px;      padding: 15px;    }    .article h1 {      font-size: 24px;    }  }

.search-container {    container-type: inline-size;  }  .search-bar {    display: flex;    align-items: center;    background: #f0f0f0;    border-radius: 24px;  }  .search-input {    border: none;    background: transparent;    padding: 10px;    transition: all 0.3s;  }  .search-icon {    padding: 10px;    cursor: pointer;  }  @container (max-width: 150px) {    .search-input {      display: none; /* فقط آیکون */    }  }  @container (min-width: 151px) {    .search-input {      display: block;      width: 100%;    }  }

/* Media Queries – برای چیدمان کلی صفحه */  @media (max-width: 768px) {    .page {      grid-template-columns: 1fr;    }    .sidebar {      order: 2;    }  }  @media (min-width: 769px) {    .page {      grid-template-columns: 280px 1fr;    }  }     /* Container Queries – برای کامپوننت‌های داخل صفحه */  .sidebar-container {    container-type: inline-size;  }  .main-container {    container-type: inline-size;  }     /* ویجت سایدبار – بر اساس عرض سایدبار */  @container (max-width: 250px) {    .widget {      display: block;      text-align: center;    }    .widget-icon {      font-size: 32px;    }  }  @container (min-width: 251px) {    .widget {      display: flex;      gap: 15px;    }  }     /* ویجت main – بر اساس عرض اصلی */  @container (min-width: 600px) {    .product-grid {      grid-template-columns: repeat(3, 1fr);    }  }  @container (max-width: 599px) {    .product-grid {      grid-template-columns: repeat(2, 1fr);    }  }

.comment-container {    container-type: inline-size;  }  .comment {    display: flex;    gap: 16px;    padding: 16px;    background: #f8f9fa;    border-radius: 12px;  }  .avatar {    width: 50px;    height: 50px;    border-radius: 50%;    background: #3498db;  }  @container (max-width: 300px) {    .comment {      flex-direction: column;      text-align: center;    }    .avatar {      margin: 0 auto;    }  }

.sidebar {    container-name: sidebar;    container-type: inline-size;  }  .main {    container-name: main;    container-type: inline-size;  }  .footer {    container-name: footer;    container-type: inline-size;  }     /* هر کدام قوانین جداگانه دارند */  @container sidebar (max-width: 200px) {    .menu-item span { display: none; }  }  @container main (min-width: 700px) {    .product-card { display: flex; }  }  @container footer (max-width: 400px) {    .footer-links { flex-direction: column; }  }

.outer {    container-type: inline-size;    container-name: outer;  }  .inner {    container-type: inline-size;    container-name: inner;  }  @container outer (min-width: 500px) {    .outer-box {      background: red;    }  }  @container inner (max-width: 200px) {    .inner-box {      background: blue;    }  }

.dashboard-widget {    container-type: inline-size;  }  .widget-content {    display: grid;    gap: 16px;  }  @container (min-width: 400px) {    .widget-content {      grid-template-columns: repeat(2, 1fr);    }  }  @container (min-width: 600px) {    .widget-content {      grid-template-columns: repeat(4, 1fr);    }  }

.animated-container {    container-type: inline-size;    transition: all 0.3s;  }  .box {    width: 100px;    height: 100px;    background: #3498db;    transition: all 0.3s;  }  @container (min-width: 300px) {    .box {      width: 150px;      background: #e74c3c;      transform: rotate(10deg);    }  }

/* Fallback برای مرورگرهای قدیمی */  .card {    display: block;  }  /* فقط مرورگرهای مدرن این را می‌بینند */  @supports (container-type: inline-size) {    .card-container {      container-type: inline-size;    }    @container (min-width: 400px) {      .card {        display: flex;      }    }  }

/* تنظیمات پایه */  * {    margin: 0;    padding: 0;    box-sizing: border-box;  }     body {    font-family: system-ui, sans-serif;    background: #f5f6fa;  }     /* چیدمان کلی صفحه با Media Queries */  .dashboard {    display: grid;    grid-template-columns: 260px 1fr;    min-height: 100vh;  }     @media (max-width: 768px) {    .dashboard {      grid-template-columns: 1fr;    }  }     /* سایدبار – از Container Queries استفاده می‌کند */  .sidebar {    background: #2c3e50;    color: white;    container-type: inline-size;    container-name: sidebar;  }     /* Main area */  .main {    padding: 20px;    container-type: inline-size;    container-name: main;  }     /* ویجت آمار – خودش را با عرض والد تنظیم می‌کند */  .stats-widget {    background: white;    border-radius: 12px;    padding: 20px;    margin-bottom: 20px;    container-type: inline-size;  }     .stats-grid {    display: grid;    gap: 15px;  }     @container stats-widget (min-width: 400px) {    .stats-grid {      grid-template-columns: repeat(2, 1fr);    }  }     @container stats-widget (min-width: 600px) {    .stats-grid {      grid-template-columns: repeat(4, 1fr);    }  }     /* منوی سایدبار – در عرض کم فقط آیکون */  @container sidebar (max-width: 200px) {    .menu-item span {      display: none;    }    .menu-item {      justify-content: center;    }  }     /* کارت محصول در main */  .product-card-container {    container-type: inline-size;  }     .product-card {    background: white;    border-radius: 12px;    overflow: hidden;    display: flex;    transition: all 0.3s;  }     @container product-card-container (max-width: 300px) {    .product-card {      flex-direction: column;    }    .product-image {      height: 150px;    }  }     @container product-card-container (min-width: 301px) {    .product-card {      flex-direction: row;    }    .product-image {      width: 120px;    }  }

<div class="dashboard">    <aside class="sidebar">      <div class="menu-item">🏠 <span>خانه</span></div>      <div class="menu-item">📊 <span>آمار</span></div>      <div class="menu-item">⚙️ <span>تنظیمات</span></div>    </aside>    <main class="main">      <div class="stats-widget">        <div class="stats-grid">          <div class="stat-card">بازدید: ۱۲٬۰۰۰</div>          <div class="stat-card">فروش: ۳۴۰</div>          <div class="stat-card">کاربر: ۱٬۲۰۰</div>          <div class="stat-card">امتیاز: ۴.۸</div>        </div>      </div>      <div class="product-card-container">        <div class="product-card">          <div class="product-image">تصویر</div>          <div class="product-info">            <h3>محصول عالی</h3>            <p>توضیحات محصول...</p>          </div>        </div>      </div>    </main>  </div>