CSS Media Query Examples
أمثلة علي Media Query في لغة CSS
سوف تتعلم في هذا الدرس أمثلة متنوعة علي نظام media query في لغة CSS وكيفية إستخدام هذا النظام مع خطوط وألوان وأحجام العناصر وعمل تصميمات مختلفة علي حسب حجم كل شاشة.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
}
لا تنسي
</>
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;
}
}
لا تنسي
</>
CSS media query navbar
قائمة تنقل متجاوبة مع شاشات مختلفة في لغة CSS
تستخدم media query لإنشاء قائمة تنقل سريعة متجاوبة مع أجهزة مختلفة ،والتي تختلف في التصميم باختلاف أحجام الشاشات في لغة CSS.
CSS media query navbar
قائمة تنقل سريعه مع نظام media query في لغة CSS.
@media screen and (max-width: 500px)
{
ul
{
width:100%;
}
}
لا تنسي
خصائص
وسائط
إضافة
نقطة توقف
أعمدة
متجاوب
صفوف
مثال
تصميم
موبايل
الأول
أخري
سطح المكتب
عادي
جهاز
توجيه
منظر طبيعي
إخفاء
عناصر
مع
تغيير
حجم الخط
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
