تصميم موقع متجاوب مع الهاتف: شرح CSS مع أمثلة عملية

ابدأ من الهاتف

التصميم المتجاوب يكيّف المحتوى والتخطيط مع عرض الشاشة. أضف viewport: <meta name="viewport" content="width=device-width, initial-scale=1">، ثم ابدأ بتخطيط بسيط للشاشات الضيقة قبل إضافة تحسينات للمساحات الأكبر.

استخدم وحدات مرنة

استخدم النسب وrem وclamp عند ملاءمتها بدل تثبيت كل الأبعاد بالبكسل. مثال:

.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }

واجعل الصور مرنة باستخدام max-width:100% وheight:auto.

اختر Grid وFlexbox

يناسب Flexbox ترتيب العناصر في محور واحد، مثل أزرار أو قائمة تنقل. ويناسب Grid تخطيطات البطاقات. مثال:

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:1rem; }

استخدم نقاط التحول عند الحاجة

اختر media queries عندما يبدأ المحتوى في الازدحام لا لأن جهازًا بعينه يفرض ذلك. مثال:

@media (max-width:42rem) { .site-nav { flex-wrap:wrap; gap:.5rem; } }

اختبر التمرير الأفقي وتداخل النصوص والأزرار الصغيرة، واختبر RTL على أجهزة فعلية إن أمكن.

الخلاصة: ابدأ بخطوة قابلة للقياس

تعلم بناء تصميم متجاوب مع الهاتف باستخدام CSS وmedia queries وFlexbox وGrid مع أمثلة قابلة للتطبيق. اختر إجراءً عمليًا من هذا الدليل، وطبّقه ثم قيّم أثره بدل إجراء تغييرات عشوائية كثيرة في الوقت نفسه. ما التحدي الذي تواجهه حاليًا في هذا الموضوع؟

الكاتب وصاحب الموقع: imad limrani