التصميم المتجاوب: استعلامات الوسائط، الوحدات النسبية

كيّف واجهاتك مع كل حجم شاشة عبر منهج mobile-first، واستعلامات الوسائط، والوحدات rem و% وvw.

9 دقيقة · 3 أسئلة

المنهج المهني هو mobile-first: تكتب أنماط الشاشة الصغيرة أولاً، ثم تعزّز التخطيط كلما ازدادت المساحة، باستخدام استعلامات وسائط min-width. تبقى CSS الأساسية بسيطة، ولا تضيف كل نقطة تحوّل إلا ما يتغيّر فعلاً.

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

أما بخصوص الوحدات، فامنع البكسل في الطباعة. تساوي 1rem حجم خط العنصر الجذر (16px افتراضياً)، وتحترم قبل كل شيء إعداد حجم النص الذي اختاره المستخدم في متصفّحه. فمستخدم ضعيف البصر يضبط خطّه على 20px سيرى موقعك كله يتحجّم بالتناسب - شريطة أن تكون قد استخدمت rem.

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

.section {
  padding: 4rem 1.5rem;
}

أما للعروض، فادمِج الوحدات النسبية: % لأخذ حصّة من الأب، وmax-width لتحديد سقفها على الشاشات الكبيرة، وvw للأحجام المرتبطة بعرض منفذ العرض (تساوي 1vw 1% منه). تنشئ الدالة clamp(min, ideal, max) قيماً سيّالة تتكيّف دون أيّ استعلام وسائط - مثالية للعناوين الكبيرة.

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. في منهج mobile-first، أيّ استعلام وسائط تستخدم لاستهداف الشاشات الكبيرة؟
   • @media (max-width: 768px)
   • @media (min-width: 768px)
   • @media (device: desktop)
2. افتراضياً، إلامَ تشير 1rem؟
   • 10 بكسل، وهي قيمة ثابتة في معيار CSS
   • حجم خط العنصر الأب
   • حجم خط العنصر الجذر، 16px افتراضياً
3. إلامَ تساوي 50vw؟
   • 50% من عرض منفذ العرض
   • 50% من عرض العنصر الأب
   • 50 بكسل بصرف النظر عن النافذة