مقالة مقدمة من wulin.com (www.vevb.com): تصميم ويب سريع الاستجابة.
مع شعبية 3G ، يستخدم المزيد والمزيد من الأشخاص هواتفهم المحمولة لتصفح الإنترنت.
تتجاوز الأجهزة المحمولة أجهزة سطح المكتب وتصبح المحطة الأكثر شيوعًا للوصول إلى الإنترنت. لذلك ، يتعين على مصممي الويب مواجهة مشكلة صعبة: كيف يمكنهم تقديم صفحة الويب نفسها على أجهزة ذات أحجام مختلفة؟
شاشة الهاتف المحمول صغير نسبيًا ، وعادة ما تكون أقل من 600 بكسل ؛ يتجاوز عرض الشاشة لجهاز كمبيوتر بشكل عام 1000 بكسل (حاليًا هو العرض السائد 1،366 × 768) ، وبعضها يصل إلى 2000 بكسل. ليس من السهل الحصول على نتائج مرضية على شاشات بأحجام مختلفة.
يتمثل حل العديد من مواقع الويب في توفير صفحات ويب مختلفة للأجهزة المختلفة ، مثل توفير إصدار محمول أو إصدار iPhone/iPad. هذا يضمن التأثير ، لكنه مزعج للغاية. يتطلب الحفاظ على عدة إصدارات. علاوة على ذلك ، إذا كان لدى موقع الويب بوابات متعددة ، فسوف يزيد بشكل كبير من تعقيد تصميم الهندسة المعمارية.
لذلك ، تخيل بعض الأشخاص منذ فترة طويلة ما إذا كان يمكن تصميمه في وقت واحد وقابل للتطبيق بشكل عام على نفس صفحة الويب تتكيف تلقائيًا مع شاشات بأحجام مختلفة ، وتعديل التصميم تلقائيًا وفقًا لعرض الشاشة؟
1. مفهوم تصميم الويب التكيفي
في عام 2010 ، اقترح إيثان ماركوت مصطلح تصميم الويب المستجيب ، والذي يشير إلى تصميم ويب يمكنه التعرف تلقائيًا على عرض الشاشة وإجراء التعديلات المقابلة.
قدم مثالاً على صور الأبطال الستة لمغامرات شيرلوك هولمز. إذا كان عرض الشاشة أكبر من 1300 بكسل ، فإن 6 صور في صف جنبًا إلى جنب.
إذا كان عرض الشاشة يتراوح بين 600 بكسل و 1300 بكسل ، يتم تقسيم الصور الستة إلى سطرين.
إذا كان عرض الشاشة يتراوح بين 400 بكسل و 600 بكسل ، فإن شريط التنقل ينتقل إلى رأس الصفحة.
إذا كان عرض الشاشة أقل من 400 بكسل ، يتم تقسيم 6 صور إلى ثلاثة أسطر.
Mediaqueri.es لديها المزيد من الأمثلة مثل هذا أعلاه.
يوجد أيضًا عنصر واجهة مستخدم اختبار هنا ، والذي يمكنه عرض تأثيرات اختبار الشاشات ذات القرارات المختلفة على صفحة ويب في نفس الوقت. أوصي بتثبيته.