آشنایی با طراحی واکنش گرا (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 برای ساخت صفحات واکنش گرا استفاده می کند.

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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

چگونه می‌توانیم برای سایز های مختلف صفحه استایل های متفاوت بسازیم؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

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

فیلم آموزشی asp.net core 2

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

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

15 نظر

15 پاسخ

  1. سلام
    من یک کادر دارم اما تو گوشی همش نصفه میوفته باید چیکار کنم درست بشه ؟

    1. سلام
      بهتره inspect بزنی و ببینی چه width اعمال کردی.

  2. با سلام
    من با bootstrap کار میکنم، اما حرفه ای نیستم.اما هنوز نتونستم تو حالت موبایل margin , padding رو تنظیم کنم. لطفا راهنمایی بفرمائید.

    1. سلام مصباح.
      فریم ورک bootstrap از px استفاده نمیکنه که بخواد مقدارش ثابت باشه. از rem استفاده میکنه و این خودش در حالت های مختلف (در سایزهای مختلف) مقدارش فرق میکنه.

    1. سلام علی اکبر دقیقا با مدیا کوئری ها این کار انجام میشه.

  3. سلام وقتتون بخیر ممنون از توضیحاتتون من با flex کار میکنم و جایی که کار میکنم اصرار دارند با bootstrap کار نشود و flex باشد مشکل من اینجاست media ها رو هم خوب متوجه نشدم لطفا یا منبع کامل تری رو بهم پیشنهاد کنید یا بفرمایید با flex چجوری کاملا ریسپانسیو کنم؟

    1. سلام مینا
      سرچ کن flex css responsive و از منابع استفاده کن

  4. سلام. آقا شما که هر کدوم از اعضای تیمتون واسه خوش داستانی داره، و اینقد آدمو انژی میدین. من به صفحه تون انتقاد دارم.این باکس های آموزشی که میزارید و توش کد مینویسید، فقط تو حالت افقی موبایل عرض ۱۰۰ داره و متنشو کامل میشه خوند. خب حالا ما میایم افقی کنیم، سه تا نوار اون پایینرو گرفته و نوبار هم اان بالا رو. همش یه خط پیداس. حالا اگر به پایین اسکرول کنیم، به زحمت یه چهار خطی پیدا میشه. من عصبی شدم تا این مقاله رو خوندم. یه فکری براش کنید ترو خدا.

    1. سلام وحیده. ممنون از اینکه این مورد گزارش دادی.
      باگ بود درست شد. باید البته کش مرورگر رو خالی کنی تا تغییرات حس کنی.

  5. سلام
    وقت بخیر
    من برای طراحی وب واکنش گرا به جای Bootstrap از همان Html و CSS خام (view port, media query) استفاده می کنم.
    حالا شرکتی که براش به صورت پروژه ای کار می کنم از من میخواد که برای طراحی قالب ها از Bootstrap استفاده کنم.
    حالا سوالم اینه که آیا لازم هست که این کار را انجام بدم یا خیر؟ یعنی بدون Bootstrap نمیشه که شرکت اصرارش بر استفاده از Bootstrap هست؟
    ممنون میشم جواب بدین

    1. سلام محمدرضا
      این موارد باید قبل طراحی صحبت میشد.
      بله میشه بدون bootstrap زد ولی اصولا استفاده از bootstrap کار برنامه نویس رو ساده تر میکنه و استانداردها رو بهتر میتونه اجرا کنه. همینطور اگر شخص دیگه به غیر شما کدهاتون نگاه کنه میتونه بهتر درک کنه.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=