CSS

CSS Media Queries
نظام media queries في لغة CSS

سوف تتعلم في هذا الدرس CSS media queries وكيف تعمل ولماذا تستخدم مع صفحات الويب وعلاقتها بالتصميمات المتجاوبة,

التاريخ

31 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

3052

المواضيع

24
الشروحات chevron_left CSS Media Queries chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Media Queries
نظام media queries في لغة 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

طريقة كتابة 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

قائمة بأنواع media queries في لغة CSS لا تعمل media queries فقط لعمل قواعد أو استثناءات لضبط صفحات الويب المتجاوبة فقط وإنما تعمل ايضاً مع الطباعة.
Value Description
all

Used for all media type devices تستخدم مع جميع الاجهزة

print

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

يوجد أنواع كثيرة من الشاشات والأجهزة بأحجام مختلفة سواء طول الشاشة أو عرضها، لذلك من الصعب إنشاء 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) { ... }
Resize
قم بتكبير وتصغير حجم نافذة المتصفح حتي تتمكن من رؤية تغييرات لون عنوان الصفحة يتغير مع كل حجم لان حجم viewport يتغير عند التكبير والتصغير.

</> CSS media query orientation
media query مع إتجاهات صفحة الويب في لغة CSS

يمكن عن طريق media query تغيير تخطيط الصفحة اعتمادًا على اتجاه صفحة الويب. يمكنك الحصول على مجموعة من خصائص CSS التي لن يتم تطبيقها إلا عندما تكون نافذة المتصفح عرضها أكبر من طولها ، وهو ما يسمى landscape أو عندما تكون نافذة المتصفح طولها أكبر من عرضها portrait.

CSS media query orientation

media query مع إتجاهات صفحة الويب في لغة CSS.

@media (orientation: landscape) {
  body {
    background-color:pink;
  }
}
Resize
قم بتكبير وتصغير حجم نافذة المتصفح حتي تتمكن من رؤية تغييرات لون عنوان الصفحة يتغير مع كل حجم لان حجم viewport يتغير عند التكبير والتصغير.
مصطلحات الدرس
Media
Media

وسائط

Website
Website

موقع إنترنت

Responsive
Responsive

متجاوب

Style
Style

نمط أو شكل

Sheet
Sheet

ورقة

Types
Types

أنواع

Value
Value

قيمة

Description
Description

الوصف

All
All

الجميع

Print
Print

طباعة

Screen
Screen

شاشة

Speech
Speech

قارئ الشاشة

Examples
Examples

أمثلة

Menus
Menus

القوائم

Columns
Columns

أعمدة

Hide
Hide

إخفاء

Elements
Elements

عناصر

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.