أنماط Min-Width وMax-Width

نظرة عامة على min-width وmax-width

استخدام max-width للمحتوى القابل للقراءة

<article class="article" style="background:#4f8cff11;">This paragraph is capped at roughly 70 characters per line for comfortable reading, regardless of how wide its container is.</article>

استخدام max-width للحاويات المتمركزة

<div class="container" style="background:#4f8cff11;border:1px solid #4f8cff;">Centered container, max-width: 1200px</div>

استخدام min-width لمنع الانهيار

<button class="button">OK</button>
<table class="data-table" style="border-collapse:collapse;margin-top:8px;">
  <tr><th style="border:1px solid #ccc;">ID</th></tr>
</table>

مرونة ضمن حدود

<div class="sidebar" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar: 25% wide, min 200px, max 350px</div>

استخدام max-width: 100% للصور المتجاوبة

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="landscape" />

استخدام min() بدل متغير CSS مع max-width

<div class="card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Card: width: min(400px, 100%)</div>

استخدام min-content وmax-content كقيم

<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">A rather long tag label</span>

أعمدة الجداول باستخدام min-width

<table style="border-collapse:collapse;width:100%;">
  <tr>
    <td style="border:1px solid #ccc;">Short</td>
    <td>This is a much longer cell value that should be truncated with an ellipsis when the column is too narrow to fit it</td>
  </tr>
</table>

نطاقات عروض الاستعلامات الإعلامية

<p style="font-size:0.85em;color:#888;">This scene declares a tablet-only breakpoint range with no properties yet — see the CSS panel.</p>

حاوية ذات مسافات داخلية غير متماثلة

<div class="wrapper" style="background:#4f8cff11;border:1px solid #4f8cff;">Wrapper: max-width 1440px, clamped inline padding</div>

تحقق سريع

مراجعة