التصميم المتجاوب

أفكار رئيسية

1. الجوّال أوّلًا: اكتب CSS للشاشات الضيّقة أولًا، ثم أضف Media Queries للشاشات الأعرض.
2. وحدات نسبية: rem و% وvw/vh بدلًا من البيكسل الثابت.
3. صور سائلة: max-width: 100%; height: auto.
4. نقاط التوقف: قليلة (مثلًا 640 و1024 و1280) مختارة وفق المحتوى لا وفق الأجهزة.

.card { padding: 12px; }
@media (min-width: 640px) {
  .card { padding: 24px; }
}