درس 8 من 8
التصميم المتجاوب
التصميم المتجاوب يجعل الموقع يعمل جيداً على كل أحجام الشاشات. استخدم media queries لتغيير التنسيق عند أحجام شاشة محددة.
استخدم وحدات نسبية مثل %, em, rem و vw/vh عندما يكون ذلك مناسباً بدلاً من الاعتماد على pixels فقط.
CSS
/* الهاتف أولاً: التنسيقات الافتراضية */
.container { padding: 24px; }
/* الأجهزة اللوحية وما فوق */
@media (min-width: 768px) {
.container { padding: 48px; }
}
/* الكمبيوتر */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}