CSS

CSS Grid Media Queries
صفحات متجاوبة بنظام grid في لغة CSS

Media Query هي عبارة عن نظام او أسلوب وتم انشائها بواسطة ال CSS 

التاريخ

24 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

680

المواضيع

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

CSS Grid Media Queries
صفحات متجاوبة بنظام grid في لغة CSS

</> CSS responsive grid with media query
نظام grid مع الصفحات المتجاوبة في لغة CSS

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

CSS responsive grid with media query
@media only screen and (max-width: 768px) {
/* For mobile phones: */
  [class*="col-"]
  {
    width: 100%;
  }
}

</> CSS structure grid with media
هيكلة صفحة grid مع نظام media query في لغة CSS

هيكلة صفحة بنظام grid مع نظام media query في لغة CSS وتخصيص أحجام الأعمدة في حجم phone وتخصيص حجم computer.

CSS structure grid with media
@media only screen and (min-width: 768px)
{
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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