طراحی وب واکنشگرا در HTML

طراحی وب واکنش‌گرا در HTML

طراحی وب واکنش‌گرا (Responsive web design) به معنی ساختن صفحاتی است که در تمام دستگاه‌ها ظاهر خوبی داشته باشند! یک طراحی وب واکنش‌گرا به‌طور خودکار خود را برای اندازه‌های مختلف صفحه و ویوپورت‌ها (viewports) تنظیم می‌کند.

طراحی وب واکنش‌گرا چیست؟

طراحی وب واکنش‌گرا به استفاده از HTML و CSS برای تغییر اندازه، پنهان کردن، کوچک کردن یا بزرگ کردنِ خودکار یک وب‌سایت گفته می‌شود تا آن وب‌سایت در تمام دستگاه‌ها (دسکتاپ، تبلت و موبایل) ظاهر خوبی داشته باشد:

تنظیم Viewport (ناحیه نمایش)

برای ساخت یک وب‌سایت واکنش‌گرا، تگ <meta> زیر را به تمام صفحات وب خود اضافه کنید:

مثال:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

این کد، ویوپورت (viewport) صفحه شما را تنظیم می‌کند و به مرورگر دستورالعمل‌هایی درباره نحوه کنترل ابعاد و مقیاس‌بندی صفحه می‌دهد.

تصاویر واکنش‌گرا

تصاویر واکنش‌گرا تصاویری هستند که به‌خوبی مقیاس‌بندی می‌شوند تا با هر اندازه مرورگری متناسب باشند.

استفاده از خاصیت width

اگر خاصیت width در CSS روی 100% تنظیم شود، تصویر واکنش‌گرا خواهد بود و بزرگ و کوچک می‌شود:

مثال:

<img src="img_girl.jpg" style="width:100%;">

توجه داشته باشید که در مثال بالا، تصویر می‌تواند بزرگ‌تر از اندازه اصلی خود مقیاس‌بندی شود. یک راه‌حل بهتر در بسیاری از موارد، استفاده از خاصیت max-width است.

استفاده از خاصیت max-width

اگر خاصیت max-width روی 100% تنظیم شود، تصویر در صورت لزوم کوچک می‌شود، اما هرگز بزرگ‌تر از اندازه اصلی خود نخواهد شد:

مثال:

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

نمایش تصاویر متفاوت بسته به عرض مرورگر

عنصر <picture> در HTML به شما این امکان را می‌دهد که تصاویر متفاوتی را برای اندازه‌های مختلف پنجره مرورگر تعریف کنید.

پنجره مرورگر را تغییر اندازه دهید تا ببینید چگونه تصویر زیر بسته به عرض آن تغییر می‌کند:

مثال:

<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» تنظیم کرد که به معنای «عرض ویوپورت» (viewport width) است. به این ترتیب، اندازه متن از اندازه پنجره مرورگر تبعیت خواهد کرد:

سلام دنیا

پنجره مرورگر را تغییر اندازه دهید تا ببینید اندازه متن چگونه مقیاس‌بندی می‌شود.

مثال:

<h1 style="font-size:10vw">سلام دنیا</h1>

ویوپورت (Viewport) همان اندازه پنجره مرورگر است. 1vw برابر با ۱٪ از عرض ویوپورت است. اگر ویوپورت ۵۰ سانتی‌متر عرض داشته باشد، 1vw برابر با ۰.۵ سانتی‌متر است.

مدیا کوئری‌ها (Media Queries)

علاوه بر تغییر اندازه متن و تصاویر، استفاده از مدیا کوئری‌ها نیز در صفحات وب واکنش‌گرا رایج است. با مدیا کوئری‌ها می‌توانید استایل‌های کاملاً متفاوتی را برای اندازه‌های مختلف مرورگر تعریف کنید.

مثال: پنجره مرورگر را تغییر اندازه دهید تا ببینید سه عنصر 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>

نکته: برای یادگیری بیشتر در مورد مدیا کوئری‌ها و طراحی وب واکنش‌گرا، آموزش RWD ما را بخوانید.

صفحه وب واکنش‌گرا 

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

طراحی وب واکنش‌گرا - فریم‌ورک‌ها

تمام فریم‌ورک‌های محبوب CSS از طراحی واکنش‌گرا پشتیبانی می‌کنند. آن‌ها رایگان و استفاده از آن‌ها آسان است.

codoloper.CSS

codoloper.CSS یک فریم‌ورک مدرن CSS است که به‌طور پیش‌فرض از طراحی برای دسکتاپ، تبلت و موبایل پشتیبانی می‌کند. codoloper.CSS کوچک‌تر و سریع‌تر از فریم‌ورک‌های مشابه CSS است. codoloper.CSS طوری طراحی شده است که به jQuery یا هر کتابخانه جاوا اسکریپت دیگری وابسته نباشد.

دموی codoloper.CSS

برای دیدن واکنش‌گرایی، اندازه صفحه را تغییر دهید!

لندن

لندن پایتخت انگلستان است. این شهر پرجمعیت‌ترین شهر در بریتانیا است و منطقه کلان‌شهری آن بیش از ۱۳ میلیون نفر جمعیت دارد.

پاریس

پاریس پایتخت فرانسه است. منطقه پاریس یکی از بزرگ‌ترین مراکز جمعیتی در اروپا با بیش از ۱۲ میلیون نفر جمعیت است.

توکیو

توکیو پایتخت ژاپن است. این شهر مرکز «منطقه بزرگ توکیو» (Greater Tokyo Area) و پرجمعیت‌ترین منطقه کلان‌شهری در جهان است.

 مثال:

<!DOCTYPE html>
<html>
  <head>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
  </head>
  <body>
    <div class="w3-container w3-green">
      <h1>W3Schools Demo</h1>
      <p>Resize this responsive page!</p>
    </div>

    <div class="w3-row-padding">
      <div class="w3-third">
        <h2>London</h2>
        <p>London is the capital city of England.</p>
        <p>
          It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
        </p>
      </div>

      <div class="w3-third">
        <h2>Paris</h2>
        <p>Paris is the capital of France.</p>
        <p>
          The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
        </p>
      </div>

      <div class="w3-third">
        <h2>Tokyo</h2>
        <p>Tokyo is the capital of Japan.</p>
        <p>
          It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
        </p>
      </div>
    </div>
  </body>
</html>

برای یادگیری بیشتر درباره codoloper.CSS، آموزش codoloper.CSS ما را بخوانید.

بوت‌استرپ (Bootstrap)

یکی دیگر از فریم‌ورک‌های محبوب CSS، بوت‌استرپ است:

مثال:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container-fluid p-5 bg-primary text-white text-center">
      <h1>My First Bootstrap Page</h1>
      <p>Resize this responsive page to see the effect!</p>
    </div>

    <div class="container mt-5">
      <div class="row">
        <div class="col-sm-4">
          <h3>Column 1</h3>
          <p>Lorem ipsum...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 2</h3>
          <p>Lorem ipsum...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 3</h3>
          <p>Lorem ipsum...</p>
        </div>
      </div>
    </div>
  </body>
</html>