طراحی واکنش گرا چیست؟ آیا فرقی بین طراحی ریسپانسیو و واکنش گرا وجود دارد؟ از چه روش هایی برای ساخت صفحات ریسپانسیو میتوانیم استفاده کنیم؟ در این مقاله در رابطه با طراحی ریسپانسیو (Responsive) یا واکنشگرا (پس فرقی ندارند) صحبت کنیم و با روش های پیاده سازی این نوع صفحات آشنا شویم.
سرفصلهای پست
طراحی واکنش گرا در وب به چه معناست؟

طراحی واکنش گرا در وب به استفاده از HTML و CSS برای تغییر اندازه، پنهان سازی، برش و یا بزرگ نمایی خودکار صفحات وبسایت برای نمایش مناسب بر روی همه دستگاه ها (دسکتاپ، تبلت و موبایل ها) گفته می شود.
به یاد داشته باشید تعریف وبسایت خوب، وبسایتی است که واکنش گرا باشد و روی همه دستگاه ها به خوبی نمایش داده شود.
تنظیم ویو پورت
هنگام ساخت صفحه های وب واکنش گرا، اضافه کردن کد متای زیر به همه صفحات وبسایت الزامی است.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
این کد باعث تنظیم ویو پورت برای صفحه می شود که به مرورگر دستورالعمل نحوه کنترل ابعاد و مقیاس صفحه را می دهد.
در مقاله آشنایی با Viewport به صورت کامل با آن آشنا میشوید.
تصاویر واکنش گرا
تصاویر واکنش گرا، تصاویری هستند که به صورت مناسب برای هر مرورگر با هر اندازه ای تغییر پیدا میکنند.
استفاده از خاصیت width
اگر خاصیت width تصویر در CSS با مقدار 100% تنظیم شود، عکس قرار داده شده واکنش گرا خواهد بود و در صورت نیاز بزرگ و کوچک خواهد شد.
<img src="img_mizfa.jpg" style="width:100%;">
توجه کنید که در مثال فوق عکس قرار داده شده می تواند به اندازه بزرگ تر از اندازه اصلی تغییر کند. برای حل این مشکل، استفاده از خاصیت max-width به جای width می تواند راه حل مناسبی باشد.
استفاده از خاصیت max-width
اگر مقدار خاصیت max-width برابر با 100% تنظیم شده باشد، عکس تا حد ممکن برای رسیدن به اندازه مناسب کوچک می شود. تفاوت max-width و width در این است که در خاصیت max-width عکس هیچ گاه بزرگ تر از اندازه اصلی نمی شود.
<img src="img_mizfa.jpg" style="max-width:100%;height:auto;">
نمایش عکس های متفاوت وابسته به طول مرورگر
تگ <picture>
موجود در HTML به شما اجازه می دهد تا عکس را برای اندازه های مختلف مرورگر ها تنظیم کنید.
<picture> <source srcset="img_smallSeo.jpg" media="(max-width: 600px)"> <source srcset="img_Google.jpg" media="(max-width: 1500px)"> <source srcset="Mizfa.jpg"> <img src="img_smallSeo.jpg" alt="Mizfa-SEO"> </picture>
در مثال بالا با تغییر عرض صفحه نمایش ما ، تصاویر ما نیز نسبت به صفحه نمایش تغییر خواهد کرد. برای مثال برای صفحات با حداکثر عرض ۶۰۰ پیکسل تصویر img_smallSeo.jpg نمایش داده میشود، برای صفحات با حداکثر ۱۵۰۰ پیکسل عرض تصویر img_Google.jpg نمایش داده میشود و برای دیگر عرض ها نیز تصویر Mizfa.jpg نمایش داده میشود.
اندازه متن واکنش گرا
اندازه متون را می توان با واحد “vw” تعیین کرد، این واحد مخفف طول ویو پورت است. با استفاده از این واحد، می توان مطمئن بود همیشه اندازه متن دنبال کننده اندازه پنجره مرورگر خواهد بود.
<h1 style="font-size:10vw">Hello Mizfa</h1>
کوئری های رسانه (MediaQuery)
علاوه بر تغییر اندازه متون و تصاویر، استفاده از کوئری های رسانه در صفحات واکنش گرا رایج است.
توسط کوئری های رسانه شما می توانید به طور کامل استایل های متفاوتی را برای هر اندازه تعریف کنید.
به عنوان مثال،در نمونه کد زیر تغییر اندازه پنجره مرورگر باعث جا به جایی و تغییر اندازه سه تگ <div> می شود.
<style> .left, .right { float: left; width: 20%; /* The width is 20%, by default */ } .main { float: left; width: 60%; /* The width is 60%, by default */ } /* Use a media query to add a breakpoint at 800px: */ @media screen and (max-width: 800px) { .left, .main, .right { width: 100%; /* The width is 100%, when the viewport is 800px or smaller */ } } </style>
در مثال بالا استایل مدیا کوئری ها نمایش داده شده است و اگر حداکثر عرض صفحه ۸۰۰ پیکسل باشد
فریم ورک های طراحی واکنش گرا
در حال حاضر فریم ورک های زیادی وجود دارند که طراحی واکنش گرا ارائه می دهند. این فریم ورک ها رایگان و برای استفاده آسان هستند. در اینجا برخی از این فریم ورک ها را نام می بریم.
W3.css
یک راه عالی برای ایجاد طراحی واکنش گرا، استفاده از فریم ورکهای واکنش گرا است.
این فریم ورک طراحی وبسایت هایی که بر روی هر اندازه ای جواب می دهند را آسان می کند.
از مزایای این فریم ورک، آسان بودن استفاده و سریع تر بودن نسبت به سایر فریم ورک های css مشابه است.
dark
بوت استرپ (Bootstrap)

یک فریم ورک رایج دیگر bootstrap است. این فریم ورک از HTML، CSS و jquery برای ساخت صفحات واکنش گرا استفاده می کند.
این فریم ورک بیشتر برای وبسایت های با محوریت کاربری موبایل مورد استفاده قرار می گیرد.
پایان ترم
[box type=”info” class=”question-from-users” width=””]چگونه میتوانیم برای سایز های مختلف صفحه استایل های متفاوت بسازیم؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله با صفحات واکنش گرا یا ریسپانسیو آشنا شدیم و نحوه پیاده سازی این صفحات را نیز باهاشون آشنا شدیم.
طبق تعریف همیشگیم از دوره آموزش CSS ، نوید معدن نژاد در دوره آموزش CSS در رابطه با واکنش گرایی نیز نوشته است که پیشنهاد میکنم، این دوره آموزشی را دنبال کنید.
از اینکه دوره آموزش HTML را دنبال میکنید، سپاسگزارم و امیدوارم براتون مفید بوده باشه. اگر سوال پیشنهاد و انتقادی داشتید خوشحال میشم که باهام در میان بگذارید و حتما در اولین فرصت بهتون پاسخ میدم.
تا مقاله بعدی…
15 پاسخ
جواب سوال:
با استفاده از mediaqueryها
سلام
من یک کادر دارم اما تو گوشی همش نصفه میوفته باید چیکار کنم درست بشه ؟
سلام
بهتره inspect بزنی و ببینی چه width اعمال کردی.
با سلام
من با bootstrap کار میکنم، اما حرفه ای نیستم.اما هنوز نتونستم تو حالت موبایل margin , padding رو تنظیم کنم. لطفا راهنمایی بفرمائید.
سلام مصباح.
فریم ورک bootstrap از px استفاده نمیکنه که بخواد مقدارش ثابت باشه. از rem استفاده میکنه و این خودش در حالت های مختلف (در سایزهای مختلف) مقدارش فرق میکنه.
جواب سوال :
استفاده از مدیا کوئری ها
سلام علی اکبر دقیقا با مدیا کوئری ها این کار انجام میشه.
پاسخ سوال :
با استفاده از MediaQuery
سلام محمد دقیقا درست گفتی.
سلام وقتتون بخیر ممنون از توضیحاتتون من با flex کار میکنم و جایی که کار میکنم اصرار دارند با bootstrap کار نشود و flex باشد مشکل من اینجاست media ها رو هم خوب متوجه نشدم لطفا یا منبع کامل تری رو بهم پیشنهاد کنید یا بفرمایید با flex چجوری کاملا ریسپانسیو کنم؟
سلام مینا
سرچ کن flex css responsive و از منابع استفاده کن
سلام. آقا شما که هر کدوم از اعضای تیمتون واسه خوش داستانی داره، و اینقد آدمو انژی میدین. من به صفحه تون انتقاد دارم.این باکس های آموزشی که میزارید و توش کد مینویسید، فقط تو حالت افقی موبایل عرض ۱۰۰ داره و متنشو کامل میشه خوند. خب حالا ما میایم افقی کنیم، سه تا نوار اون پایینرو گرفته و نوبار هم اان بالا رو. همش یه خط پیداس. حالا اگر به پایین اسکرول کنیم، به زحمت یه چهار خطی پیدا میشه. من عصبی شدم تا این مقاله رو خوندم. یه فکری براش کنید ترو خدا.
سلام وحیده. ممنون از اینکه این مورد گزارش دادی.
باگ بود درست شد. باید البته کش مرورگر رو خالی کنی تا تغییرات حس کنی.
سلام
وقت بخیر
من برای طراحی وب واکنش گرا به جای Bootstrap از همان Html و CSS خام (view port, media query) استفاده می کنم.
حالا شرکتی که براش به صورت پروژه ای کار می کنم از من میخواد که برای طراحی قالب ها از Bootstrap استفاده کنم.
حالا سوالم اینه که آیا لازم هست که این کار را انجام بدم یا خیر؟ یعنی بدون Bootstrap نمیشه که شرکت اصرارش بر استفاده از Bootstrap هست؟
ممنون میشم جواب بدین
سلام محمدرضا
این موارد باید قبل طراحی صحبت میشد.
بله میشه بدون bootstrap زد ولی اصولا استفاده از bootstrap کار برنامه نویس رو ساده تر میکنه و استانداردها رو بهتر میتونه اجرا کنه. همینطور اگر شخص دیگه به غیر شما کدهاتون نگاه کنه میتونه بهتر درک کنه.