أوضحت هذه المقالة بالتفصيل مفهوم التصميم المستجيب ، ومزايا وعيوب التخطيط المستجيب ، ومفاهيم التصميم ، ورمز التنفيذ المحدد. إنها مقالة نادرة. هنا نوصي به للأصدقاء 1. ما هو التصميم المستجيب؟
التصميم المتجاوب هو مفهوم اقترحه إيثان ماركوت في مايو 2010. باختصار ، يمكن أن يكون موقع الويب متوافقًا مع أطراف متعددة - بدلاً من إنشاء نسخة محددة لكل محطة.
ولد هذا المفهوم لحل تصفح الإنترنت المحمول. يمكن أن يوفر التصميم المتجاوب للمستخدمين من المحطات المحطات المختلفة واجهة أكثر راحة وتجربة مستخدم أفضل. علاوة على ذلك ، مع التعميم الحالي للأجهزة المحمولة ذات الشاشة الكبيرة ، ليس من المبالغة وصفها على أنها اتجاه عام.
نظرًا لأن المزيد والمزيد من المصممين يتبنون هذه التكنولوجيا ، فإننا لا نرى الكثير من الابتكارات فحسب ، بل نرى أيضًا بعض النماذج التي تم تشكيلها.
2. ما هي مزايا وعيوب التصميم المستجيب؟ ميزة:مرونة قوية في مواجهة أجهزة حل مختلفة
يمكن حل مشاكل التكيف مع العرض متعدد الأجهزة بسرعة
عيب:متوافق مع المعدات المختلفة ، وعبء العمل العالي والكفاءة المنخفضة
الرمز مرهق ، وسيظهر العناصر الخفية وغير المجدية ، مما سيزيد من وقت التحميل.
في الواقع ، هذا هو حل تصميم التسوية ، والذي لا يمكنه تحقيق أفضل النتائج بسبب تأثير عوامل متعددة.
إلى حد ما ، سيتم تغيير بنية التخطيط الأصلي للموقع ، وسيحدث ارتباك المستخدم
3. كيفية تصميم تصميم متجاوب؟1. كيفية حل مشكلة التوافق بين الأجهزة المختلفة؟
يمكن أن يحل الاستعلام الإعلامي في CSS3 هذه المشكلة.
2. ما هي القيم التي يمكن أن تحصل عليها الاستعلام عن الوسائط؟
عرض الجهاز ، يعرض الجهاز الشاشة/جهاز اللمس.
عرض عرض وارتفاع النافذة ، يعرض Hegth جهاز الشاشة/اللمس.
الاتجاه المحمول للجهاز ، الاتجاه الأفقي أو الرأسي (صورة | lanscape) والطابعة ، إلخ.
نسبة شاشة الجانب Ratio DOT Matrix Printer ، إلخ.
نسبة الجهاز-طابعة مصفوفة النقطة الخاصة بالجهاز ، إلخ.
لون الكائن أو قائمة الألوان ، مؤشر اللون يعرض الشاشة.
حل الجهاز
3. بنية بناء الجملة والاستخدام
بناء الجملة: اسم الجهاز media فقط (حدد شرط) لا (حدد شرط) و (شرط تحديد الجهاز) ، الجهاز اثنين {srules}
الاستخدام:
أ. مثال 1: استخدم Media في الرابط:
<link rel = typesheet type = text /css media = screen فقط و (max-width: 480px) ، فقط الشاشة و (max-device-width: 480px) href = link.css rel = noflow /> الخارجي />
فقط في الاستخدام أعلاه يمكن حذفه ويقتصر على مراقبة الكمبيوتر. يشير الحد الأقصى للشرط الأول إلى الحد الأقصى لعرض واجهة التقديم ، ويشير عرض الحالة الثانية إلى الحد الأقصى لعرض الجهاز.
ب. تضمين Media في ورقة الأنماط:
انسخ الرمز