التصميم المتجاوب (Responsive Design)

كيفية الكتابة (Mobile First Approach):

/* 1. التنسيق الأساسي (للموبايل أولاً) */
.box { background: blue; }

/* 2. شاشات التابلت فما فوق */
@media (min-width: 768px) {
  .box { background: green; }
}

/* 3. شاشات الكمبيوتر فما فوق */
@media (min-width: 1024px) {
  .box { background: purple; }
}