CSS Media Queries
نظام media queries في لغة CSS
سوف تتعلم في هذا الدرس CSS media queries وكيف تعمل ولماذا تستخدم مع صفحات الويب وعلاقتها بالتصميمات المتجاوبة,
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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
| 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
يوجد أنواع كثيرة من الشاشات والأجهزة بأحجام مختلفة سواء طول الشاشة أو عرضها، لذلك من الصعب إنشاء 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
</>
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
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
