در حال بارگذاری...
HTML واکنشگرا
گوشی، تبلت و دسکتاپ یک URL دارند. صفحه واکنشگرا سازگار میشود نه layout دسکتاپ ریز. HTML شروع میکند؛ CSS تمام میکند.
پاسخ مستقیم
1) در head: <meta name="viewport" content="width=device-width, initial-scale=1.0">
2) عرض انعطافپذیر (%، max-width)
3) تصاویر: img { max-width: 100%; height: auto; }
media queryها موضوع 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 meta روی صفحه تمرین
- تصویر عریض + قانون fluid
- مرورگر را باریک کنید
- با عرض ثابت 1200px مقایسه کنید
اشتباهات آسان
- فراموش کردن viewport
- جدول/تصویر 1200px ثابت
- فکر کردن فقط HTML کافی است
خلاصه
- viewport meta ضروری
- عرض و تصویر fluid
- media query در CSS
- موبایل را زود طراحی کنید
🧠 دانش خود را بیازمایید
آماده شروع
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
5
سوالات
70%
برای قبولی
∞
زمان
∞
تلاشها
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود