أساسيات Responsive — مكتبة DECT

01بدا بقياسات مرنة

خلّي العناصر يكبرو حتى لعرض مناسب بدل ما تفرض عرض ديال الحاسوب على التليفون. وما تنساش Meta Viewport فصفحة HTML.

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container { width: min(100% - 32px, 1100px); margin-inline: auto; }
img { max-width: 100%; height: auto; }
</style>

02زيد التنظيم ملي تكون البلاصة

بدا بعمود واحد، ومنين يكون العرض كافي زيد أعمدة. ما تبنيش Responsive غير على موديل تليفون واحد.

.cards { display: grid; gap: 16px; }
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

03جرّب حتى القياسات بين الشاشات

صغّر وكبّر العرض بشوية، جرّب Zoom وعناوين طوال والتنقّل بالكلافي. الصفحة خاصها تخدم حتى بين Breakpoints. ما تخبّيش محتوى مهم غير باش يدخل فالعرض.

04جرّب براسك

بدّل بين المعاينة الضيقة والعريضة وشوف الأعمدة كيفاش كيتكيّفو.

مثال تقدر تبدلو

<style>
.cards { display: grid; gap: 12px; }
.card { border: 1px solid #ccc; padding: 20px; }
@media (min-width: 500px) { .cards { grid-template-columns: 1fr 1fr; } }
</style>
<div class="cards"><div class="card">First idea</div><div class="card">Second idea</div></div>

غير HTML و CSS. تشغيل السكريبتات وإرسال الفورمات معطّل.

باش تزيد تفهم

تقدر ترجع لـ شروحات MDN و معيار HTML Living Standard باش تفهم أكثر وتشوف التوصيات الجديدة.