CSS Responsive Viewport
نافذة عرض المستخدم في لغة CSS
سوف تتعلم في هذا الدرس نافذة عرض المستخدم في لغة CSS وهو جزء من صفحة الويب يظهر بعرض أو بحجم شاشة الأجهزة المختلفة [large screen - Desktop - laptop - tablet - phones].
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Responsive Viewport
نافذة عرض المستخدم في لغة CSS
</>
CSS Responsive Viewport
نافذة عرض المستخدم في لغة CSS
- viewport علي شاشة computer هي بعرض شاشة الكمبيوتر و viewport علي شاشة phone هي بعرض شاشة phone.
كانت صفحات الويب قديماً مصممة فقط لأجهزة الكمبيوتر فقط فكان يجب علي المستخدم عند تصفح صفحات ويب من أجهزة صغيرة بالقيام بسحب scroll أفقي يميناً ويساراً لكي يتصفح محتوي صفحة الويب, ,والأن عن طريق viewport أصبح الأمر سهلاً مطورين مواقع الويب لديهم طريقة لمعرفة حجم الشاشة الحالي وبناء عليه تتمدد صفحة الويب ويكون لها عرض = عرض viewport تماماً.
عندما تتمدد صفحة الويب وتكون بعرض الشاشة فقط أين تذهب عناصر صفحة الويب وما الزي يحدث لها؟ جميع العناصر تكون أسفل بعضها لبعض وتسمي هذة العملية wrapping عند تصغير الشاشة فكل عنصر ليس له مكان في هذا الصف يتم ترحيله الي صف جديد.
</>
HTML add viewport web page
إضافة viewport لصفحة الويب عن طريق HTML
خطوات إضافة viewport لصفحة الويب:
- يتم إضافة عنصر meta tag بداخل عنصر head لأي صفحة ويب.
- إضافة خاصية name لعنصر meta tag بالقيمة viewport ليصبح بهذا الشكل name="viewport".
- إضافة خاصية content لعنصر meta tag بالقيمة "width="device-width, initial-scale=1 ليصبح بهذا الشكل "content="width=device-width, initial-scale=1.
عنصر meta tag مع viewport يخبر المتصفح أن wrapping تلتف العناصر بحسب حجم الشاشة width=device-width تتمدد العناصر للأسفل في صفوف أو سطور جديدة عندما لا توجد مساحات لها داخل viewport كل شاشة لها عرض مختلف لعناصر صفحة الويب.
initial-scale=1.0 هي خاصة بتحديد القيمة الأولية التي سوف تعتمد عليها صفحة الويب عندما تقوم بالتحميل اول مرة.
HTML add viewport to web page
إضافة viewport لصفحة الويب بلغة HTML.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</>
CSS viewport rules
قواعد viewport في لغة CSS
يجب مراعاة عدم ظهور scroll أفقياً لصفحات الويب الناتج عن طفح المحتوي خارج حدود viewport والذي يؤي في النهاية إلي تجربة مستخدم سيئة.
هناك بعض القواعد التي يجب اتباعها لتحسين تجربة المستخدم مع viewport:
1. لا تستخدم عناصر كبيرة ثابتة العرض:
على سبيل المثال ، إذا تم عرض صورة بعرض أوسع من إطار العرض viewport ، فقد يتسبب ذلك في تمرير إطار العرض viewport أفقيًا. تذكر أن تضبط هذا المحتوى ليناسب مع عرض viewport.
2. لا تدع المحتوى يعتمد على عرض viewport معين حتى يتم عرضه جيدًا:
نظرًا لأن أبعاد الشاشة وعرضها في وحدات بكسل CSS تختلف اختلافًا كبيرًا بين الأجهزة ، يجب ألا يعتمد المحتوى على عرض viewport معين للعرض بشكل جيد.
3. استخدم خصائص CSS لتطبيق أنماط مختلفة للشاشات الصغيرة والكبيرة:
سيؤدي تعيين عرض CSS مطلقة كبيرة لعناصر الصفحة إلى جعل العنصر عريضًا جدًا بالنسبة لإطار العرض viewport على جهاز أصغر. بدلاً من ذلك ، جرب استخدام قيم العرض النسبية ، مثل width: 100%. احذر أيضًا من استخدام قيم تحديد المواقع المطلقة الكبيرة. قد يتسبب ذلك في خروج العنصر خارج إطار العرض على الأجهزة الصغيرة.
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
