0Pricing
CSS Academy · درس

دوال Min وMax وClamp

استخدم min() وmax() وclamp() لتغيير الأحجام تكيفيًا استجابةً لحجم الحاوية أو نافذة العرض.

دوال Min وMax وClamp درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

لماذا دوال المقارنة في CSS؟

تتيح لك دوال المقارنة في CSS التعبير عن تغيير الحجم الشرطي من دون JavaScript: «استخدم هذا الحجم، لكن لا تجعله أصغر أو أكبر من هذه الحدود». وهي أساس التصميم الحديث المرن والمتجاوب.

الدالة min()

تعيد min() أصغر قيمة من قائمة قيم مفصولة بفواصل. ويختار المتصفح القيمة الأصغر وفق حجم إطار العرض الحالي.

<div class="container">Container width: min(800px, 90%)</div>

الدالة max()

تعيد max() القيمة الأكبر. وهي مفيدة لتحديد أحجام دنيا تستمر في الازدياد.

<p>Text sized with max(1rem, 2vw)</p>

الدالة clamp()

تقيّد clamp(min, preferred, max) قيمةً بين حد أدنى وحد أقصى. وعادةً ما تكون القيمة المفضلة مرنة (مثل vw).

<h1>Clamped Heading</h1>

clamp() للطباعة المرنة

تلغي الطباعة المرنة باستخدام clamp() الحاجة إلى تجاوزات متعددة لحجم الخط عبر استعلامات الوسائط:

<h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>Body copy that scales fluidly with the viewport.</p>

clamp() للمسافات المرنة

طبّق النمط نفسه على المسافات للحصول على هوامش ومسافات حشو تستجيبان للحجم تلقائيًا:

<div class="section">Section with fluid padding</div>

min() للحاويات

نمط آمن للحاويات لا يتجاوز أبدًا max-width ولا يضيف تمريرًا أفقيًا:

<div class="wrapper">Safe wrapper container</div>

تداخل الدوال

يمكنك تداخل دوال المقارنة لإنشاء تعبيرات معقدة:

<p class="hero-text">Nested min/max inside clamp()</p>

دمج calc() مع clamp()

استخدم calc() داخل clamp() للحصول على استيفاء مرن ودقيق بين حجمين:

<h1>Precise fluid heading</h1>

min-content max-content fit-content

يوفر CSS أيضًا قيمًا أساسية للحجم:

  • min-content: أصغر حجم ممكن من دون حدوث تجاوز
  • max-content: يشغل المساحة التي يحتاج إليها المحتوى
  • fit-content(): يشبه max-content، لكن مع حد أقصى تحدده
<span class="tag">Tag label</span>

دعم المتصفحات

تحظى min() وmax() وclamp() بالدعم في جميع المتصفحات الحديثة. ولا حاجة إلى بادئات. ويمكن استخدامها في أي موضع يُتوقع فيه استخدام قيمة طول أو تردد أو زمن أو رقم.

تحقق سريع

يستخدم عنوان ما font-size: clamp(1rem, 4vw, 3rem) في نافذة عرض عرضها 600px. ما حجم الخط؟

مراجعة

تختار min() أصغر قيمة، بينما تختار max() أكبر قيمة. وتقيّد clamp(min, preferred, max) القيمة المرنة ضمن حدود معينة. وتدعم هذه الدوال الطباعة والمسافات المرنة الحديثة، وغالبًا ما تلغي الحاجة إلى تجاوزات متعددة عبر استعلامات الوسائط.

الأسئلة الشائعة

هل درس «دوال Min وMax وClamp» مجاني؟

نعم — نص درس «دوال Min وMax وClamp» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «دوال Min وMax وClamp»؟

استخدم min() وmax() وclamp() لتغيير الأحجام تكيفيًا استجابةً لحجم الحاوية أو نافذة العرض. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «دوال Min وMax وClamp»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. الوحدات المطلقة: px وpt وcm
  2. الوحدات النسبية: em وrem
  3. وحدات نافذة العرض: vw وvh وdvh
  4. دوال Min وMax وClamp
← العودة إلى CSS Academy