جاري التحميل...

نقاط التوقف في CSS

درس استعلامات الوسائط كيف يُفعَّل @media. ودرس الصور المتجاوبة كيف تملأ الصور الخانات التي تفتحها تلك الاستعلامات. نقاط التوقف هي الخطة: قائمة قصيرة من العروض التي يتغيّر عندها استراتيجية التخطيط — الأعمدة، التنقل، التباعد — تسمّيها مرة واحدة وتعيد استخدامها حتى يتحرّك الموقع كله بنفس الإيقاع.

صندوق أدوات نقاط التوقف

📊 نقاط التوقف بنظرة

القطعة المهمة اليومية
نقطة توقف عرض مخطَّط له يتغيّر عنده قواعد التخطيط
اختيار مبني على المحتوى اختر العرض حيث يبدو التصميم ضيقاً أو فارغاً — لا موديلات الهاتف
خطوات مسماة (sm، md، lg…) نفس الرمز في كل مكان؛ مراجعة وتعاون أسهل
سلم mobile-first الأساس = ضيق؛ خطوات min-width تضيف تحسينات
مرونة بين الخطوات %، rem، Flex/Grid قبل إضافة استعلام جديد
مجموعة موثّقة قائمة قصيرة في تعليقات أو tokens — لا عشرين قيمة عشوائية

نقطة التوقف ليست «الآيفون». بل «عندما لا يعود الشريط الجانبي يلائم بجانب المقال» أو «عندما يمكن للتنقل أن يصبح صفاً». قِس المحتوى، ثم اكتب خطوة مشتركة واحدة.

المحتوى أولاً — لا فهرس أجهزة

صغّر نافذة المتصفّح حتى ينكسر شيء: سطر طويل جداً، بطاقات مضغوطة، قائمة همبرغر رغم وجود مساحة. سجّل ذلك العرض بـ rem (أو em). هذا أفضل من نسخ جدول تسويقي لبكسلات الهواتف.

علّق القرار لا الجهاز

css 
/* Break when article + sidebar need two columns (~48rem content width) */
@media (min-width: 48rem) {
.layout {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
}

قوائم الأجهزة بكسل لكل موديل تتقادم بسرعة — هواتف جديدة كل عام. بضع خطوات مبنية على المحتوى تبقى مفيدة أطول وتحافظ على stylesheet مقروءاً.

سمِّ الخطوات — أعد استخدام نفس العروض

اختر من خطوتين إلى أربع لموقع نموذجي. أعطها أسماء قصيرة في التعليقات (أو custom properties تحمل قيم العرض). كل مكوّن يبدأ «التخطيط العريض» يجب أن يستخدم نفس الرقم — لا 720px في الرأس و768px في الشبكة.

رموز breakpoint مسماة (custom properties)

css 
:root {
--bp-md: 40rem;
--bp-lg: 64rem;
}

/* Usage still needs a literal in @media in classic CSS —
keep tokens and queries in sync, or use a preprocessor/build step. */
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 64rem) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}

في CSS الكلاسيكي لا يقرأ @media custom properties كشرط في كل المتصفحات كما قد تتمنى — فعامل tokens في :root كـ توثيق ومساعدة للأدوات/JS، وابقِ القيم الحرفية المتطابقة متسقة. العادة المهمّة: سلم مشترك واحد، لا عروض عشوائية في كل ملف.

سلم mobile-first

اكتب الافتراضات الضيقة بدون استعلامات. كل خطوة min-width تضيف أعمدة، خطاً أكبر، أو تنقلاً أفقياً. تجنّب إعادة كتابة الصفحة كاملة في كل خطوة — غيّر طبقة واحدة واضحة.

سلم mobile-first بثلاث خطوات

css 
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

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

@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 64rem) {
.nav {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}

.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}

ضبط desktop-first (عندما تبدأ من العريض)

إذا كان المشروع يُسلّم أصلاً تخطيطاً عريضاً، استعلامات max-width يمكن أن تطوي الأعمدة على الشاشات الأصغر. كن متسقاً: لا تخلط min-width وmax-width عشوائياً لنفس المكوّن بلا سبب.

ضبط desktop-first في خطوة واحدة

css 
.sidebar {
width: 18rem;
float: left;
margin-right: 1.5rem;
}

@media (max-width: 39.99rem) {
.sidebar {
float: none;
width: auto;
margin-right: 0;
}
}

فضّل اتجاهاً واحداً لكل مشروع. درس Media Queries غطّى صيغة min-width مقابل max-width — هنا القاعدة استراتيجية: خطوات مشتركة، نفس الفلسفة في كل مكان.

خطوة واحدة، عدة مكوّنات

عندما يُفعَّل --bp-lg (أو 64rem)، حدّث التنقل والشبكة والتباعد معاً إن كانوا في فصل التخطيط نفسه. العروض المتفرقة «تقريباً نفسها» تسبّب أخطاء حيث ينقلب الرأس قبل الشبكة الرئيسية.

خطوة كبيرة مشتركة للتنقل والمحتوى الرئيسي

css 
@media (min-width: 64rem) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.main {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
}
}

مرونة أولاً — استعلامات ثانياً

بين نقاط التوقف، Flex وGrid و% وrem يجب أن تستوعب تغيّرات العرض الصغيرة. أضف استعلاماً جديداً فقط عندما يلزم تغيير هيكلي (عدد أعمدة، نمط تنقل مختلف). المزيد من الاستعلامات لا يعني احترافية أكثر.

جرّب بنفسك

  1. غيّر حجم صفحة تدريبية واذكر عرضين يحتاج فيهما التخطيط فعلاً إلى تغيير.
  2. حوّل تلك العروض إلى rem وسمّها (md، lg).
  3. طبّق نفس قيمتي min-width على شبكة البطاقات والتنقل.
  4. ابحث في CSS عن أرقام min-width/max-width أخرى — ادمج المكرّرات القريبة.
  5. احذف استعلاماً غير ضروري بتحسين الأساس المرن (gap، minmax، wrapping).

أخطاء شائعة

  • فهرس بعرض كل هاتف بدل نقاط ضغط المحتوى
  • اثنا عشر استعلاماً متداخلاً بقيم بكسل مختلفة قليلاً
  • الرأس ينكسر عند 768px، الرئيسي عند 800px، التذييل عند 720px
  • تخطّي CSS المرن وحل كل حركة بـ @media جديد
  • إعادة تدريس أقواس @media أو srcset هنا بدل تخطيط السلم

ملخص

  • نقاط التوقف خطوات تخطيط مخطَّطة — سمِّ مجموعة قصيرة وأعد استخدامها
  • اختر العروض من ضغط المحتوى، لا من جداول تسويق الأجهزة
  • فضّل سلم min-width mobile-first؛ اتجاه واحد لكل مشروع
  • ابقَ مرناً بين الخطوات؛ استعلم فقط للتغييرات الهيكلية
  • هذا يختتم وحدة Responsive — التالي: Box Shadow في Effects & Motion

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 57 من 63
Css درس تعليمي