طراحی واکنش گرا (Responsive)
طراحی واکنش گرا یعنی صفحه در همه دستگاه ها خوب دیده شود. اندازه ها خودکار با "نمایش نما (Viewport)" هماهنگ می شوند. مثل وقتی کتاب را نزدیک و دور می بری، متن باید همیشه خوانا باشد.
نمایش نما (Viewport) را تنظیم کن
نمایش نما یعنی محدوده دید مرورگر. با تگ متا، عرض صفحه با عرض دستگاه هماهنگ می شود.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
تصویر واکنش گرا با width
اگر عرض تصویر 100٪ باشد، تصویر همراهِ ظرفش بزرگ و کوچک می شود.
<img src="img_girl.jpg" style="width:100%;">
بهتر: محدودیت با max-width
با max-width تصویر هرگز از اندازه اصلی بزرگ تر نمی شود. بنابراین کیفیت حفظ می شود.
<img src="img_girl.jpg" style="max-width:100%;">
تصویر مناسب هر عرض با <picture>
تگ picture اجازه می دهد برای عرض های مختلف، فایل های متفاوت بدهی.
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
اندازه متن با واحد vw
vw یعنی درصدی از عرض نمایش نما. با رشد پنجره، متن هم هم زمان تغییر می کند.
<h1 style="font-size:10vw;">Hello World</h1>
Media Query برای چیدمان سازگار
Media Query یعنی شرط های CSS برای عرض های مختلف. ستون ها در کوچک نمایی زیر هم می آیند.
<style>
.left, .right {
float: left;
width: 20%;
}
.main {
float: left;
width: 60%;
}
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%;
}
}
</style>
نمونه کامل صفحه واکنش گرا
یک نمونه کامل را در ادیتور باز کن و تغییر بده.
<!-- نمونه کامل در TryIt -->
<!-- شامل هدر، سه ستون و فوتر -->
فریم ورک ها: شروع سریع
فریم ورک یعنی کتابخانه CSS آماده. با W3.CSS یا Bootstrap سریع جلو برو.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
گام های تمرینی سریع
- تگ متای نمایش نما را اضافه کن.
- برای تصاویر از max-width:100% استفاده کن.
- تیتر را با vw واکنش گرا کن.
- با Media Query چیدمان را تطبیق بده.
نکته: اگر پروژه کوچک است، از فریم ورک شروع کن؛ اما اصول را یاد بگیر.
پیوندهای مرتبط در سایت
برای چیدمان به چیدمان (Layout) برو. همین صفحه طراحی واکنش گرا را هم نشانک کن تا الگوها را سریع بیابی.
جمع بندی سریع
- viewport را همیشه تنظیم کن.
- برای تصویر از max-width استفاده کن.
- vw برای متن، مقیاس پذیر است.
- با Media Query طرح را تطبیق بده.
- در نیاز فوری، سراغ فریم ورک برو.