CSS

CSS Media Query Examples
أمثلة علي Media Query في لغة CSS

سوف تتعلم في هذا الدرس أمثلة متنوعة علي نظام media query في لغة CSS وكيفية إستخدام هذا النظام مع خطوط وألوان وأحجام العناصر وعمل تصميمات مختلفة علي حسب حجم كل شاشة.

التاريخ

06 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1626

المواضيع

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

CSS Media Query Examples
أمثلة علي Media Query في لغة CSS

</> CSS font Size with media query
الخطوط مع نظام media query في لغة CSS

لتضمن تجربة عرض ممتازة لموقعك علي الشاشات المختلفة فأنت بحاجة الي تخصيص حجم عرض النصوص الموجودة في موقعك لتضمن أن شكل الصفحة يكون متناسق علي عدة احجام من الشاشات. 

CSS font Size with media query

تغيير حجم الخط علي شاشات مختلفه مع نظام media query بلغة CSS.

@media screen and (max-width: 500px) {
  p
  {
    font-size: 15px;
  }
}
لا تنسي
لا تنسي تصغير وتكبير حجم نافدة المتصفح حتي تتمكن من رؤية التفيرات التي تتم بواسطة media query علي أحجام الشاشات المحتلفة.

</> CSS hide element with media Query
إخفاء بعض العناصر بنظام media Query في لغة CSS

استخدام media query مع عنصر أو بعض العناصر أو كل العناصر لأخفائها علي بعض الشاشات أو شاشة محددة وهو يعد أمر شائع في لغة CSS.

CSS hide element with media Query

سوف يختفي عرض عنصر p علي أي حجم شاشة أصغر 600px والعكس في الشاشات الاكبر من 600px.

/* If the screen size is 600px wide or less, hide the element */
@media (max-width: 600px) {
  p 
  {
    display: none;
  }
}
لا تنسي
لا تنسي تصغير وتكبير حجم نافدة المتصفح حتي تتمكن من رؤية التفيرات التي تتم بواسطة media query علي أحجام الشاشات المحتلفة.

</> CSS media query navbar
قائمة تنقل متجاوبة مع شاشات مختلفة في لغة CSS

تستخدم media query لإنشاء قائمة تنقل سريعة متجاوبة مع أجهزة مختلفة ،والتي تختلف في التصميم باختلاف أحجام الشاشات في لغة CSS.

CSS media query navbar

قائمة تنقل سريعه مع نظام media query في لغة CSS.

@media screen and (max-width: 500px) 
{
  ul
  {
  width:100%;
  }
}
لا تنسي
لا تنسي تصغير وتكبير حجم نافدة المتصفح حتي تتمكن من رؤية التفيرات التي تتم بواسطة media query علي أحجام الشاشات المحتلفة.
مصطلحات الدرس
Properties
Properties

خصائص

Media
Media

وسائط

Add
Add

إضافة

Breakpoint
Breakpoint

نقطة توقف

Columns
Columns

أعمدة

Responsive
Responsive

متجاوب

Rows
Rows

صفوف

Example
Example

مثال

Design
Design

تصميم

Mobile
Mobile

موبايل

First
First

الأول

Another
Another

أخري

Desktop
Desktop

سطح المكتب

Typical
Typical

عادي

Device
Device

جهاز

Orientation
Orientation

توجيه

Landscape
Landscape

منظر طبيعي

Hide
Hide

إخفاء

Elements
Elements

عناصر

Change
Change

تغيير

Font Size
Font Size

حجم الخط

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

Cascading Style Sheets

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

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

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