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