طراحی وب واکنش گرا (Responsive Web Design)
طراحی وب واکنش گرا یا Responsive Web Design به معنای ایجاد صفحاتی است که در تمام دستگاه ها از جمله موبایل، تبلت و دسکتاپ به خوبی نمایش داده شوند. صفحات واکنش گرا به صورت خودکار با اندازه های مختلف صفحه نمایش هماهنگ می شوند.
تنظیم Viewport
برای واکنش گرا کردن صفحات باید تگ <meta> زیر را در همه صفحات قرار دهید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">این تگ به مرورگر دستور می دهد ابعاد و مقیاس صفحه را مطابق دستگاه کاربر تنظیم کند.
تصاویر واکنش گرا
برای واکنش گرا کردن تصاویر می توانید از ویژگی width یا max-width استفاده کنید:
<img src="image.jpg" style="max-width:100%;height:auto;">استفاده از max-width باعث می شود تصویر هرگز بزرگ تر از اندازه اصلی خود نشود.
نمایش تصاویر مختلف بر اساس عرض مرورگر
با عنصر <picture> می توانید تصاویر متفاوتی را برای عرض های مختلف مرورگر مشخص کنید.
<picture>
<source srcset="small.jpg" media="(max-width:600px)">
<source srcset="medium.jpg" media="(max-width:1500px)">
<img src="default.jpg" alt="Responsive Image">
</picture>متن واکنش گرا
با استفاده از واحد vw می توانید اندازه متن را متناسب با عرض مرورگر تنظیم کنید:
<h1 style="font-size:10vw">Hello World</h1>مدیا کوئری ها (Media Queries)
مدیا کوئری ها به شما امکان می دهند استایل های متفاوتی برای اندازه های مختلف صفحه نمایش تعریف کنید.
<style>
.main { width:60%; float:left; }
@media (max-width:800px) {
.main { width:100%; }
}
</style>استفاده از فریم ورک ها
فریم ورک هایی مانند Bootstrap و W3.CSS ابزارهایی آماده برای ایجاد صفحات واکنش گرا ارائه می دهند.
برای یادگیری بیشتر به بخش عناصر و تکنیک های چیدمان و عنصر head در HTML مراجعه کنید.