جاري التحميل...
HTML متجاوب
الهاتف واللوحي والحاسوب يشاركون الرابط. الصفحة المتجاوبة تتكيف. HTML يبدأ؛ CSS يكمل.
إجابة مباشرة
1) <meta name="viewport" content="width=device-width, initial-scale=1.0"> في head
2) عروض مرنة
3) img { max-width: 100%; height: auto; }
استعلامات الوسائط في CSS.
Viewport meta
html
HTML Code
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
</head>Fluid images helper
html
HTML Code
<style>
img { max-width: 100%; height: auto; }
</style>
<img src="images/wide.jpg" alt="Wide landscape photo">جرّب بنفسك
- تأكد من viewport
- صورة عريضة + CSS
- ضيّق النافذة
- قارن بعرض ثابت
أخطاء شائعة
- نسيان viewport
- جداول/صور 1200px
- HTML وحده يكفي
ملخص
- viewport أساسي
- عروض وصور مرنة
- media queries في CSS
- صمّم للشاشات الصغيرة
🧠 اختبر معرفتك
جاهز للبدء
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
5
الأسئلة
70%
للنجاح
∞
الوقت
∞
المحاولات
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى