التصميم المتجاوب بـ CSS
Flex المتجاوب وGrid المتجاوب أظهرا حيل تخطيط عند breakpoints. التصميم المتجاوب الصورة الأكبر: موقع واحد يبقى مقروءًا على الهاتف واللوح والشاشة العريضة — دون نسختين HTML. هذا الدرس يضع العادات؛ استعلامات الوسائط ونقاط التوقف والصور المتجاوبة تعمّق الحرفة لاحقًا.
صندوق أدوات التصميم المتجاوب
📊 التصميم المتجاوب بنظرة واحدة
| قطعة | المهمة اليومية |
|---|---|
| Viewport meta | يخبر متصفحات الجوال باستخدام عرض الجهاز لا عمود desktop وهمي |
| حاوية مرنة | width: 100% + max-width + padding جانبي — طول سطر مقروء |
وحدات نسبية (rem، %، em) |
طباعة وتباعد يتكيف مع الإعدادات والسياق |
| صور مرنة | max-width: 100% حتى لا يفيض الوسيط على الشاشات الضيقة |
| شجرة HTML واحدة | نفس المعالم والروابط؛ CSS ينقل التخطيط |
| Media queries (الدرس التالي) | تطبيق تغييرات القواعد عند تطابق العرض |
الصفحات بعرض ثابت التي تتصغّر أو تتمرّر أفقيًا على الهاتف تُزعج المستخدم. التصميم المتجاوب يقبل أي عرض ويضبط التباعد والأعمدة والخط بهدوء — مستخدمًا أنماط Flex وGrid التي تدرّبت عليها عند الحاجة.
Viewport meta — متصفح الجوال يحتاج تلميحًا
بدون <meta name="viewport" content="width=device-width, initial-scale=1"> كثير من الهواتف تعرض canvas بعرض desktop وتصغّره. أضفه مرة في <head> ثم صمّم بـ CSS.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
Mobile-first مقابل desktop-first
Mobile-first يكتب أنماط الأساس للشاشات الضيقة ثم يضيف استعلامات min-width للشاشات الأكبر. Desktop-first يبدأ عريضًا ويستخدم max-width للتضييق — كما في دروس Flex وGrid المتجاوب. كلاهما يصلح إذا غيّرت طبقة واحدة في كل مرة؛ اختر عادة لمشروعك والتزم بها.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 1rem;
}
/* درس Media Queries يضيف قواعد min-width هنا */
حاوية مرنة متمركزة
اجمع العرض الكامل مع سقف max-width وpadding أفقي حتى لا يلمس المحتوى حافة الشاشة. هذا النمط يعمل قبل اختيار Flex أو Grid للأعمدة.
.page-wrap {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
وحدات نسبية للخط والتباعد
rem يربط الأحجام بحجم خط الجذر — جيد للعناوين والفجوات. % يناسب العرض داخل الأب. تجنّب تثبيت كل شيء بالبكسل عندما يحافظ المقياس النسبي على هدوء الصفحة مع التكبير.
:root {
font-size: 100%;
}
h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem;
}
.lead {
font-size: 1.125rem;
max-width: 40rem;
}
صور ووسائط مرنة
الصور الأعرض من viewport تسبب تمريرًا أفقيًا. حارس بسيط: display: block وmax-width: 100% مع height: auto.
img,
video {
display: block;
max-width: 100%;
height: auto;
}
عادة متجاوبة هادئة
شجرة HTML واحدة. viewport meta في مكانه. حاوية مرنة ووحدات نسبية أولًا. استخدم أنماط Flex وGrid المتجاوبة عندما يجب أن تتدفق الأعمدة — لا موقع «للجوال فقط» ثاني. دوّن خطة breakpoints؛ درس Media Queries يسمّي الصياغة.
جرّب بنفسك
- تأكد من viewport meta في صفحة نموذجية.
- لف المحتوى في حاوية مرنة مع
max-widthوpadding جانبي. - ضع نص body بـ
remوجرّب تكبير المتصفح. - أضف قاعدة الصورة المرنة لمعرض.
- اذكر تخطيطًا ما زال يحتاج media query — احفظه للدرس التالي.
أخطاء شائعة
- عرض px ثابت على كل wrapper — لا مساحة على الشاشات الصغيرة
- موقع m.example.com منفصل بدل CSS متجاوب على شجرة واحدة
- نسيان viewport meta والتعجب من مظهر «مصغّر» على الجوال
- صور ضخمة بدون
max-width: 100%— تمرير أفقي - افتراض أن هذا المقدمة يستبدل دروس Media Queries وbreakpoints والصور المتجاوبة
ملخص
- التصميم المتجاوب يكيّف شجرة HTML واحدة عبر أحجام viewport
- viewport meta + حاوية مرنة + وحدات نسبية هي الأساس
- mobile-first وdesktop-first عادات بداية؛ media queries تطبّق التحولات
- دروس Flex وGrid المتجاوبة أدوات داخل هذا التفكير
- التالي: Media Queries — صياغة وعادات breakpoint هادئة
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى