المفاهيم الأساسية:
- استعلامات الوسائط: شروط تسمح لك بتطبيق أنماط CSS المختلفة بناءً على خصائص الجهاز المستخدم لعرض المحتوى.
- media@ الشاشة: تمثل نوع الوسائط الذي يُستخدم لعرض محتوى الويب على شاشات الأجهزة.
- (الحد الأقصى للعرض: ميزة وسائط تحدد الحد الأقصى لعرض الشاشة التي سيتم تطبيق الاستعلام عليها.
- تعاريف النقاط الفاصلة: قيم تحدد نطاقات عرض الشاشة أو خصائص أخرى التي سيتم تطبيق استعلام الوسائط عليها.
الخطوات العملية:
- أضف استعلام الوسائط إلى ملف CSS الخاص بك باستخدام الصيغة التالية:
@media screen and (max-width: 767px) {
/* أنماط خاصة بشاشات العرض التي يقل عرضها عن 767 بكسل */
}
- حدد نوع الوسائط الذي تريد استهدافه، مثل الشاشة أو الطباعة.
- حدد الميزات التي تريد التحقق منها، مثل عرض الشاشة أو اتجاهها.
- حدد قيم النقاط الفاصلة التي تحدد نطاقات الخصائص التي سيتم تطبيق الاستعلام عليها.
مثال على CSS:
@media screen and (max-width: 767px) {
body {
font-size: 12px;
padding: 0 10px;
}
}
هذا المثال يطبق أنماطًا على عناصر <body> عندما تكون عرض الشاشة أقل من أو يساوي 767 بكسل، مما ينتج عنه نص أصغر وحشو أصغر حول محتوى الصفحة.