اختبار HTML المتجاوب

الخطوات

1. ابدأ من القالب الابتدائي أو حمّل مشروع مثال.
2. حرّر بنية HTML وأنماط CSS وسلوك JavaScript.
3. اضغط «تشغيل» (Ctrl/Cmd + Enter) لتحديث المعاينة في sandbox.
4. افتح لوحة Console لقراءة log وwarn وerror.
5. استخدم عناصر التحكم المتجاوبة للتحقق من التخطيط بعروض شائعة.
6. نسّق أو انسخ أو نزّل عملك كـ index.html.

مثال

مثال — تشغيل

HTML

<main class="cards"><article>A</article><article>B</article><article>C</article></main>

CSS

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards article { padding: 24px; background: #dbeafe; }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

JavaScript

console.log("Preview width:", window.innerWidth);

تظهر البطاقات في ثلاثة أعمدة فوق 600px وعمود واحد حتى 600px. محاكاة العرض لا تغني عن الاختبار على أجهزة حقيقية.

نصيحة

التنفيذ الأساسي لـ HTML وCSS وJavaScript للمعاينة يتم محليًا في متصفّحك.

أدوات ذات صلة