آموزش طراحی سایتآموزش HTML

آشنایی با طراحی واکنش گرا (Resposive) در HTML

طراحی صفحات ریسپانسیو در HTML

طراحی واکنش گرا چیست؟ آیا فرقی بین طراحی ریسپانسیو و واکنش گرا وجود دارد؟ از چه روش هایی برای ساخت صفحات ریسپانسیو می‌توانیم استفاده کنیم؟‌ در این مقاله در رابطه با طراحی ریسپانسیو (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 برای ساخت صفحات واکنش گرا استفاده می کند.

این فریم ورک بیشتر برای وبسایت های با محوریت کاربری موبایل مورد استفاده قرار می گیرد.

نتیجه گیری

در این مقاله با صفحات واکنش گرا یا ریسپانسیو آشنا شدیم و نحوه پیاده سازی این صفحات را نیز باهاشون آشنا شدیم.

طبق تعریف همیشگیم از دوره آموزش CSS ، نوید معدن نژاد در دوره آموزش CSS در رابطه با واکنش گرایی نیز نوشته است که پیشنهاد می‌کنم، این دوره آموزشی را دنبال کنید.

از اینکه دوره آموزش HTML را دنبال می‌کنید، سپاسگزارم و امیدوارم براتون مفید بوده باشه. اگر سوال پیشنهاد و انتقادی داشتید خوشحال میشم که باهام در میان بگذارید و حتما در اولین فرصت بهتون پاسخ میدم.

تا مقاله بعدی…

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر