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