در حال بارگذاری...

ریسپانسیو HTML

چیدمان نقشهٔ صفحه داد. ریسپانسیو آزمون بعدی است: همان URL روی گوشی و دسکتاپ. HTML با viewport شروع می‌کند؛ CSS عرض سیال و media query را کامل می‌کند.

یک URL، عرض‌های بسیار

کاربر سایت جدا برای موبایل نمی‌گیرد. عادت ۱۲۰۰ پیکسل اسکرول افقی می‌سازد. اول ظرف منعطف، بعد CSS.

پاسخ مستقیم

۱) متای viewport در head. ۲) عرض منعطف به‌جای پیکسل غول. ۳) img با max-width:100% و height:auto. media query موضوع 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

متای viewport — قطعهٔ ضروری HTML

بدون viewport بسیاری از گوشی‌ها بوم دسکتاپ را جمع می‌کنند و متن ریز می‌شود.

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 زوم ۱۰۰٪
viewport به‌تنهایی «تمام» نیست؛ CSS لازم است
user-scalable=no برای یادگیری توصیه نمی‌شود

تصویر سیال — نشانهٔ 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 روی گوشی سرریز می‌سازد
src و alt کار HTML؛ مقیاس کار CSS

HTML باز می‌کند؛ CSS تمام می‌کند

viewport و ساختار منعطف قفل HTML هستند. ستون‌های سیال و breakpoint کار CSS. «فقط HTML» یا «فقط CSS بدون viewport» هر دو ناقص‌اند.

تمرین — آزمایش تغییر اندازه

viewport را اضافه کنید
تصویر عریض + CSS سیال
پنجره را باریک کنید
موقتاً width=1200 بگذارید و تفاوت را ببینید
landmarks باریک هنوز منطقی پشته شوند
جمله: viewport اندازه؛ CSS انعطاف

اشتباهات آسان

فراموشی viewport
تصویر/جدول ۱۲۰۰ پیکسل ثابت
باور به اتمام فقط با HTML
قفل زوم با user-scalable=no
جدول چیدمان کل صفحه
«سایت موبایل» جدا به‌جای یک صفحهٔ تطبیقی

خلاصه

viewport قفل ضروری HTML است
تصویر و عرض سیال سرریز را کم می‌کنند
HTML + CSS شریک‌اند
media query در کورس CSS
بعدی: فرم‌ها

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود