في هذا الدرس 5تصفّح المواضيع
CSS Media Query
نظام media query في لغة CSS
CSS Media Query نظام media query في لغة CSS
media queries هو نظام أو تقنية حديثة داخل لغة CSS صمم خصيصاً لتطبيق استثناءات علي عناصر HTML بناء علي حجم viewport الحالي,وهو تطبيق نمط أو شكل معين علي كل أو بعض عناصر صفحة الويب بشروط أو قواعد معينة علي شاشات محددة وشاشات أخري نمط مختلف.
توضيح: فمثلاً في حجم medium screens الشاشات المتوسطة يمكن ان يكون عنصر <h1> بلون أحمر في الوضوع الطبيعي وعن طريق نظام media queries نقوم بتحديد هذا العنصر ليتم تطبيق عليه استثناء وهو أن يكون العنصر بلون أخضر علي small screens الشاشات الصغيرة فعندما يتم فتح صفحة الويب علي شاشة متوسطة يكون باللون الأحمر وعندما تفتح صفحة الويب علي شاشة صغيره الحجم يكون عنصر <h1> باللون الأخضر وهكذا يمكن عمل استثناءات علي شاشات أخري.
CSS Media Queries Syntax
طريقة كتابة Media Queries في لغة CSS
CSS Media Queries Syntax طريقة كتابة Media Queries في لغة CSS
طريقة كتابة media queries في لغة CSS:
- media queries تبدأ جملة أو عبارة بعلامة @ متبوعة بكلمة media لتصبح بهذا الشكل media@.
- media types تحديد نوع الجهاز مثل all لجميع أنواع الأجهزة أو screen تحديد computer screens شاشات الكمبيوتر و tablets الأجهزة اللوحية و smart-phones الهواتف الذكية.
- operators هي تحديد media queries تعمل أو لا تعمل علي شاشات بمقاسات مختلفة ثلاث اختيارات فقط وهم [and|not|only] فيمكن للعنصر في شاشة معينه لا يكون بلون أحمر عن طريق not أو يمكن للعنصر في شاشات محددة يكون بلون أحمر عن طريق only أو شاشات مع شاشات بكلمة and.
- expressions وهو عن تحديد حجم الشاشة only screen and (max-width: 500px) أو من إلي and (min-width: 200px) and (max-width: 767px) ويكون دائماً حجم الشاشة بين parentheses أقواس عادية ().
- CSS code يكون دائماً بعد media queries بين curly braces أقواس مجعدة { } يكتب بوضعة الطبيعي علي هيئة selector متبوعاً ب decleration block {}.
CSS Media Queries Syntax
طريقة كتابة Media Queries في لغة CSS.
@media not|only mediatype and (expressions) {
selector{
property:value;
property:value;
}
}
CSS media queries types
أنواع media queries في لغة CSS
CSS media queries types أنواع media queries في لغة CSS
| Value | Description |
| all | Used for all media type devices تستخدم مع جميع الاجهزة |
| Used for printers تستخدم مع الطابعات | |
| screen | Used for computer screens, tablets, smart-phones etc. تستخدم مع الشاشات الخاصة ب (الهواتف, شاشات الكمبيوتر , التابلت) |
| speech | Used for screenreaders that "reads" the page out loud تستخدم مع قارئ الشاشة |
CSS media queries typical device breakpoints
ضبط media queries علي جميع الأجهزة في لغة CSS
CSS media queries typical device breakpoints ضبط media queries علي جميع الأجهزة في لغة CSS
يوجد أنواع كثيرة من الشاشات والأجهزة بأحجام مختلفة سواء طول الشاشة أو عرضها، لذلك من الصعب إنشاء break point دقيقة لكل جهاز.
لتبسيط الأمور :يمكن استهداف خمس أحجام مختلفة من الشاشات وبهذه الطريقة نضمن أن يكون موقعك ملائم أو متجاوب مع أغلب شاشات الهواتف والكمبيوتر والكمبيوتر اللوحي.
CSS media queries typical device breakpoints
ضبط media queries علي جميع الأجهزة في لغة CSS.
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }
CSS media query orientation
media query مع إتجاهات صفحة الويب في لغة CSS
CSS media query orientation media query مع إتجاهات صفحة الويب في لغة CSS
يمكن عن طريق media query تغيير تخطيط الصفحة اعتمادًا على اتجاه صفحة الويب. يمكنك الحصول على مجموعة من خصائص CSS التي لن يتم تطبيقها إلا عندما تكون نافذة المتصفح عرضها أكبر من طولها ، وهو ما يسمى landscape أو عندما تكون نافذة المتصفح طولها أكبر من عرضها portrait.
CSS media query orientation
media query مع إتجاهات صفحة الويب في لغة CSS.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات18
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Media وسائط
- للمراجعة
- 02 Website موقع إنترنت
- للمراجعة
- 03 Responsive متجاوب
- للمراجعة
- 04 Style نمط أو شكل
- للمراجعة
- 05 Sheet ورقة
- للمراجعة
- 06 Types أنواع
- للمراجعة
- 07 Value قيمة
- للمراجعة
- 08 Description الوصف
- للمراجعة
- 09 All الجميع
- للمراجعة
- 10 Print طباعة
- للمراجعة
- 11 Screen شاشة
- للمراجعة
- 12 Speech قارئ الشاشة
- للمراجعة
- 13 Examples أمثلة
- للمراجعة
- 14 Menus القوائم
- للمراجعة
- 15 Columns أعمدة
- للمراجعة
- 16 Hide إخفاء
- للمراجعة
- 17 Elements عناصر
- للمراجعة
- 18 With مع
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات1
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي3 أسئلة تنتظرك ＋
خاصية تجاوب موقعك مع عدة شاشات مختلفة الاحجام تدعي ؟
تستخدم خاصية .................... مع media query لتحديد اقل عرض للشاشة التي سوف يتم تنفيذ عليها اجراء معين ؟
تستخدم خاصية .................... مع media query لتحديد اقصي عرض للشاشة التي سوف يتم تنفيذ عليها اجراء معين ؟
____