شرح صفوف ومحتوى الفقرة
يتصفح الناس اليوم الموقع نفسه من شاشات شديدة التنوع: هواتف ذكية صغيرة (بعرض )، وأجهزة لوحية متوسطة ()، وشاشات حواسيب عريضة ( فأكثر). وبدلاً من برمجة موقع منفصل للهاتف وآخر للحاسوب، يعتمد مطور الواجهة الأمامية على التصميم المتجاوب () باستخدام قدرات لغة :
- الأبعاد المرنة والصور المتكيفة: بدلاً من تثبيت عرض العنصر برقم جامد يخرج عن حدود شاشة الهاتف، تتمدد البطاقات والصور وتتقلص بنسب مرنة تمنع ظهور شريط تمرير أفقي مزعج.
- نقاط التكيف حسب عرض الشاشة (): تتعرف قواعد على عرض شاشة الزائر وتعيد توزيع العناصر تلقائياً؛ فتعرض ثلاث بطاقات متجاورة على شاشة الحاسوب، وبطاقتين على الجهاز اللوحي، وبطاقة واحدة تحت الأخرى على الهاتف المحمول.
- ملاءمة اللمس على الهواتف: تتحول القوائم الطويلة على الهاتف إلى قائمة مدمجة أنيقة مع تكبير الأزرار لتناسب اللمس بالإصبع.
تأمل المخطط التوضيحي الآتي ثم جرّب المحاكي التفاعلي لاختبار التجاوب والوصول الرقمي واتجاه اللغة:
تتضمن كل صفحة ويب متجاوبة وسم الأساسي في قسم رأس الصفحة () ليطابق المتصفح عرض شاشة الهاتف الحقيقية:
HTML
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>