أساسيات CSS المتجاوب

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.box {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}

/* محمول: عمود واحد */
@media (max-width: 576px) {
  .box { background: #e74c3c; }
}

/* جهاز لوحي: عمودان */
@media (min-width: 577px) and (max-width: 992px) {
  .box { background: #f39c12; }
}

/* سطح مكتب: ثلاثة أعمدة */
@media (min-width: 993px) {
  .box { background: #2ecc71; }
}
</style>
<div class="box">صندوق متجاوب — حجم المتصفح لرؤية تغيير اللون</div>

<style>
.rem-demo {
  font-size: 1.2rem;  /* نسبي للجذر */
}
.vw-demo {
  width: 80vw;        /* 80% من عرض منفذ العرض */
}
</style>
<div class="rem-demo">نص يستخدم وحدات rem</div>
<div class="vw-demo">80% من عرض منفذ العرض</div>

/* أنماط أساسية (محمول) */
.container {
  width: 100%;
  padding: 10px;
}

/* جهاز لوحي */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* سطح مكتب */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

img {
  max-width: 100%;
  height: auto;
}