جاري التحميل...

تجاوب HTML

بعد التخطيط يأتي التجاوب: نفس الرابط على الهاتف وسطح المكتب. HTML يبدأ بـ viewport؛ CSS يُكمل.

رابط واحد وعروض كثيرة

لا موقع جوال منفصل لكل صفحة. عادة 1200px تسبب تمريرًا أفقيًا.

إجابة مباشرة

1) viewport في head. 2) عروض مرنة. 3) صور max-width:100%. الاستعلامات الإعلامية موضوع CSS.

📊 HTML unlocks vs CSS responsive tools

Layer	Job for responsiveness	Examples
HTML viewport	Tell mobile browsers how to size the layout viewport	meta name="viewport" with width=device-width
HTML structure	Keep landmarks and flexible wrappers that can reflow	header, main, aside, div.row (from layout)
CSS fluid sizing	Let boxes and images shrink instead of overflow	max-width, %, height: auto
CSS adaptation	Change columns and spacing at breakpoints	media queries, flex/grid tweaks (CSS courses)
Avoid	Huge fixed pixels and layout tables fighting narrow screens	width="1200", whole-page table chrome

meta viewport — قطعة HTML الأساسية

بدونها كثير من الهواتف تصغّر لوحة سطح مكتب فيصغر النص.

Viewport meta in head

html

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
</head>

قراءة سطر viewport

name=viewport مفتاح الجوال
width=device-width يطابق عرض الجهاز
initial-scale=1.0 تكبير 100%
CSS ما زال لازمًا

صور مرنة — وسم HTML + مقياس CSS

img مع alt؛ المرونة عبر CSS.

Fluid images helper

html

<style>
img { max-width: 100%; height: auto; }
</style>
<img src="images/wide.jpg" alt="Wide landscape photo">

قراءة القاعدة المرنة

max-width:100%
height:auto يحفظ النسبة
width=1200 يفيض على الهاتف

HTML يفتح؛ CSS يُكمّل

viewport والبنية المرنة من HTML. الأعمدة ونقاط التوقف من CSS.

تمرين — معمل تغيير الحجم

أضف viewport
صورة عريضة + CSS مرن
ضيّق النافذة
جرّب width=1200 مؤقتًا

أخطاء شائعة

نسيان viewport
وسائط 1200px ثابتة
HTML وحده يكفي
جداول تخطيط الصفحة

ملخص

viewport أساسي
صور مرنة تقلل الفيض
HTML + CSS معًا
التالي: النماذج

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى