في هذا الدرس 3تصفّح المواضيع
CSS Responsive
التصميمات المتجاوبة في لغة CSS
CSS Responsive التصميمات المتجاوبة في لغة CSS
responsive web design هو عبارة عن تصميم صفحات ويب (تطبيق ويب) متلائمة أو متجاوبة مع جميع الأجهزة, يتم عرض عناصر صفحات الويب بشكل مختلف علي حسب حجم الشاشة وعلي حسب إعدادات طريقة العرض عن طريق لغة CSS.
responsive web design:
- لا حاجة إلي لغة javascript لعمل صفحات ويب متجاوبة فقط عن طريق HTML و لغة CSS.
- تصميم صفحات ويب متجاوبة يعد طفرة في تقنيات الويب الحديثة.
- جميع صفحات الويب الحديثة تستخدم نظام responsive web design.
- يعتمد نظام responsive web design علي حجم عرض شاشة الأجهزة المختلفة [large screen - Desktop - laptop - tablet - phones].
- نظام responsive web design هو إلغاء scroll الصفحة الأفقي لصفحات الويب بدلاً من ان يقوم مستخدمي صفحات الويب بسحب الشاشة يميناً ويساراً.
- نظام responsive web design يطلق عليه أو يسمي RWD.
CSS Responsive With Devices
التصميمات المتجاوبة مع الأجهزة المختلفة في لغة CSS
CSS Responsive With Devices التصميمات المتجاوبة مع الأجهزة المختلفة في لغة CSS
يعتمد نظام responsive web design علي حجم عرض شاشة الأجهزة المختلفة [large screen - Desktop - laptop - tablet - phones].
- محتوي صفحة الويب يتم تغييرة وترتيبة داخل كل شاشة وهذا يعتمد علي توزيع العناصر بلغة CSS.
- أكثر نظام من أنظمة تقسيم صفحات الويب في لغة CSS هو نظام grid system.
- لكل صفحة ويب يتم إنشاء صفحة لكل جهاز علي حسب حجم كل شائة في العهد السابق من الويب.
- لا يوجد srcoll أفقي علي أي نوع من أحجام الشاشت المختلفة.
- يجب تخطيط صفحة الويب بنظام سهل ومرن قبل تحويلها إلي نظام responsive web design.
- نظام responsive web design هو معتمد علي نظام Media Queries.
why using Responsive web design ؟
لماذا نحن بحاجة إلي تصميمات متجاوبة؟
why using Responsive web design ؟ لماذا نحن بحاجة إلي تصميمات متجاوبة؟
لماذا نحن بحاجة إلي تصميمات متجاوبة؟ بدلًا من تصميم صفحة ويب خاصة بكل جهاز أو تطبيق كامل خاص بكل جهاز لنوفر الوقت والجهد وتصميم صفحة واحدة فقط أو تطبيق واحد فقط يعمل علي جميع الشاشات المختلفة,من الصعب صيانة جميع الصفحات معاً وعند ظهور أو تصنيع أجهزة جديدة بمقاسات مختلفة سوف يتطلب ذلك بناء صفحة جديدة بمقاسات جديدة.
يعد التصميم التصميم المتجاوب هو الحل الأمثل لهذه المشكلة ولتوضيح أهميته فأنظر إلي الأحصائيات التي تشير إلي إستخدام صفحات الويب من الأجهزة المختلفة حالياً, وكما هو واضح فإن للموبيل نصيب كبير في الدخول مواقع الويب فعدد الهواتف الذكية هو يتخطي حاجز 2.6 مليار موبيل فلا يمكن ببساطة إهمال كل هذه الأعداد وإضاعة هذه الفرص لإنجاح الموقع والوصول إلي قدر أكبر من مستخدمين الأنترنت.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات8
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Introduction مقدمة
- للمراجعة
- 02 About عن / حول
- للمراجعة
- 03 Responsive متجاوب
- للمراجعة
- 04 Orientation توجيه
- للمراجعة
- 05 Website موقع إنترنت
- للمراجعة
- 06 Design تصميم
- للمراجعة
- 07 Result نتيجة
- للمراجعة
- 08 Why Using لماذا نستخدم
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي1 أسئلة تنتظرك ＋
............... هو عملية استجابة الموقع الخاصة بك من سلوك وشكل إلى التغير فى مقاس الشاشة الذى يعرضه او الدوران orientation للموبايل و التابلت
____