CSS - Variables in Media Queries
CSS - استخدام المتغيرات مع Media Queries
🔸 يمكنك استخدام CSS Variables مع @media لتعديل القيم بناءً على حجم الشاشة أو الجهاز، مما يساعدك في إنشاء تصميم متجاوب بطريقة أنيقة وفعالة.
🔹 تعريف متغير عام في :root
:root {
--main-padding: 20px;
}
📌 هذا المتغير سيتم استخدامه كقيمة افتراضية في كل الأحجام.
---🔹 تعديل المتغير داخل media query
@media screen and (max-width: 600px) {
:root {
--main-padding: 10px;
}
}
📌 عند تصغير عرض الشاشة إلى 600px أو أقل، سيتم تعديل قيمة المتغير --main-padding تلقائيًا.
🧪 مثال عملي كامل
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--main-padding: 20px;
}
.box {
background-color: lightblue;
padding: var(--main-padding);
transition: all 0.3s ease;
}
@media screen and (max-width: 600px) {
:root {
--main-padding: 5px;
}
}
</style>
</head>
<body>
<div class="box">صندوق مرن padding حسب حجم الشاشة</div>
</body>
</html>
📌 ملاحظات هامة
- من الأفضل تعريف المتغيرات في
:rootداخل كل media query للحصول على أفضل نتائج. - يساعدك هذا الأسلوب على تغيير قيم كثيرة مثل الألوان، الهوامش، أو حتى حجم الخط بطريقة ذكية.
- استخدام المتغيرات مع media queries يجعل الكود أنظف وأسهل في التعديل.
تعليقات
إرسال تعليق