ما هو استجابة تصميم الويب

• قد 6, 2024

هناك ثلاث ميزات رئيسية لتصميم الويب المتجاوب ، وهي تخطيطات السوائل ، صور يمكن تغيير حجمها واستعلامات الوسائط. استفسارات الوسائط ليست جديدة بهذا التصميم على الويب. بدءًا من أنواع الوسائط في CSS2.1 ، يمكننا تصميم أوراق أنماط لكل من الويب والطباعة ، مع التأكد إلى حد ما من أن صفحة الويب ستبدو كما هي على الشاشة وعند الطباعة. تقدم هذا إلى استعلامات الوسائط في CSS3. يتحقق هذا الاستعلام من عرض جهاز الوسائط (أقصى عرض للجهاز) ويختبره مقابل قيمة محددة مثل 480 بكسل أو 768 بكسل. استجابةً لهذا الاستعلام ، نستخدم أنماط CSS لتغيير تخطيط الموائع وتغيير حجم الصور على الشاشة.

يمكنك بسهولة اختبار ما إذا كان موقع الويب لديه تصميم متجاوب. ابدأ بالمتصفح بعرض كامل لجهاز الكمبيوتر الخاص بك. ثم اسحب الحافة اليمنى للمتصفح إلى اليسار لتقليل عرض نافذة المتصفح. يجب أن تشاهد الصور تصبح أصغر وسيأخذ التخطيط العتبات العائمة الموجودة جنبًا إلى جنب وتكدسها رأسياً. على سبيل المثال ، إذا كان لدينا ست صور (ستة divs) في كل صف في صفحة المعرض في وضع ملء الشاشة ، حيث نقوم بتقليل عرض الشاشة ، يتم تقليل عدد الصور في الصف وتكدسها بشكل تدريجي ، حسب الحاجة. بمجرد تقليل العرض إلى مقدار معين ، ستبدأ الصور نفسها في تغيير حجمها. إذا كنت تشاهد عن كثب ، فسترى أيضًا أن بعض عناصر التصميم ، مثل ارتباطات التنقل ، قد يتم اختزالها إلى أيقونة أو حتى تختفي. يتم التحكم أيضًا في ورقة أنماط CSS.

عند تصميم مواقع الويب ، ضع في اعتبارك ليس فقط كيف ستبدو عناصر تصميم صفحة الويب في عرض ملء الشاشة ولكن كيف ستبدو عند تكدسها. فكر في عناصر التصميم التي يمكن إزالتها من الشاشة بعرض أصغر للشاشة دون تقليل وظائف موقع الويب. نظرًا لأن الميزات والتقنية الخاصة بالتصميم المتجاوب تتغير بسرعة ، فإن متابعة جميع التحسينات قد تستغرق وقتًا طويلاً. إذا كنت تفضل قضاء وقتك في التصميم بدلاً من الترميز ، فقم بإلقاء نظرة على بعض الموضوعات الجميلة المستجيبة المتوفرة لـ Wordpress. إذا كنت شركة تصميم صغيرة ، فقد ترغب في التفكير في البدء من أحد تخطيطات السمات التفاعلية عند تصميم مواقع الويب.

تعليمات الفيديو: ماهو التصميم المتجاوب Responsive Design (قد 2024).