81. مقدمة في تصميم الويب المتجاوب (RWD)
تصميم الويب المتجاوب هو ممارسة بناء موقع ويب يتكيف في تخطيطه ومظهره ووظائفه مع أحجام الشاشات والاتجاهات والدقة المختلفة (من الهواتف إلى الشاشات الكبيرة).
المبادئ الأساسية لـ RWD
- الشبكات المرنة (Fluid Grids): استخدام وحدات نسبية (
%,fr,vw) بدلاً من البكسلات الثابتة لأبعاد التخطيط الأساسية. - الوسائط المرنة: ضمان توسع الصور والوسائط داخل الحاويات.
- استعلامات الوسائط (Media Queries): الأداة الأساسية المستخدمة لتطبيق قواعد CSS محددة فقط عند استيفاء شروط معينة (مثل عرض الشاشة).
وسم Viewport Meta (إعداد حيوي)
لكي يعمل الموقع المتجاوب بشكل صحيح على الأجهزة المحمولة، يجب تضمين وسم viewport meta في قسم <head> في ملف HTML.
بدون هذا الوسم، تفترض متصفحات الجوال عرضاً كبيراً للحاسوب (مثلاً 980 بكسل) وتقوم بتصغير الصفحة بالكامل، وهو عكس التصميم المتجاوب.
html
قاعدة: ابدأ دائماً أي مشروع متجاوب جديد بإضافة هذا الوسم.