100% کامل شده تا

طراحی وب واکنش‌گرا در اچ‌تی‌ام‌ال (Responsive Web Design)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


طراحی وب‌سایت واکنش‌گرا در مورد ایجاد صفحات وبی است که در همه دستگاه‌ها خوب به نظر می‌رسند!

یک طراحی وب واکنش‌گرا به‌طور خودکار برای اندازه‌های مختلف صفحه نمایش و viewports تنظیم می‌شود.[۱]


Img temp band.jpg


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

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

Responsive demo.svg


تنظیم Viewport

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Setting the Viewport</h2>
<p>This example does not really do anything, other than showing you how to add the viewport meta element.</p>

</body>
</html>

Responsive demo.svg


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

در اینجا نمونه‌ای از یک صفحه وب بدون متا تگ viewport و همان صفحه وب با متا تگ viewport آمده‌است:

Responsive demo.svg


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




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

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

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

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p>

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

</body>
</html>

Responsive demo.svg


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

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

اگر خصوصیت max-width برابر با ۱۰۰٪ تنظیم شود، اندازه تصویر اگر لازم باشد کاهش می‌یابد اما هرگز بزرگتر از سایز اصلی خود نمی‌شود:

مثال

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

مثال

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>"max-width:100%" prevents the image from getting bigger than its original size. However, if you make the browser window smaller, the image will still scale down.</p>
<p>Resize the browser window to see the effect.</p>

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

</body>
</html>

Responsive demo.svg


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

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

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

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

Flowers


مثال

<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>

مثال

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Show Different Images Depending on Browser Width</h2>
<p>Resize the browser width and the image will change at 600px and 1500px.</p>

<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_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

Responsive demo.svg



اندازه متن واکنش‌گرا

اندازهٔ متن می‌تواند با واحد “vw” تنظیم شود، که یعنی “viewport width”.

با این کار اندازه متن از اندازه پنجره مرورگر پیروی می‌کند:

سلام بر شما

اندازه پنجره مرورگر را تغییر دهید تا نحوه تغییر سایز متن را مشاهده کنید.

مثال

<h1 style="font-size:10vw">Hello World</h1>

مثال

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>

Responsive demo.svg


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

پرس‌وجوهای رسانه‌ای (Media Queries)

علاوه بر تغییر اندازه متن و تصویر، استفاده از پرس‌وجوهای رسانه ای در صفحات وب نیز رایج است.

با پرس‌وجوهای رسانه ای می‌توانید استایل‌های کاملاً متفاوت را برای سایزهای مختلف مرورگر استفاده کنید.

مثال: سایز پنجره مرورگر را تغییر دهید تا ببینید که سه عنصر div زیر به‌طور افقی در صفحه نمایش‌های بلندتر و به شکل عمودی و روی هم (Stacked) در صفحه نمایش‌های کوچک نمایش داده می‌شوند:

Responsive demo.svg


مثال

<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>

مثال

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.left {
  background-color: #2196F3;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  background-color: #f1f1f1;
  padding: 20px;
  float: left;
  width: 60%; /* The width is 60%, by default */
}

.right {
  background-color: #04AA6D;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point 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>
</head>
<body>

<h2>Media Queries</h2>
<p>Resize the browser window.</p>

<p>Make sure you reach the breakpoint at 800px when resizing this frame.</p>

<div class="left">
  <p>Left Menu</p>
</div>

<div class="main">
  <p>Main Content</p>
</div>

<div class="right">
  <p>Right Content</p>
</div>

</body>
</html>

Responsive demo.svg


نکته: برای یادگیری بیشتر در مورد Media Queries و طراحی وب واکنش گرا، آموزش RWD ما را مطالعه کنید.


صفحه وب واکنش‌گرا - مثال کامل

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

Responsive demo.svg


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

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

آنها رایگان بوده و استفاده از آنها آسان است.



W3.CSS

W3.CSS یک چارچوب CSS مدرن است که به‌طور پیش‌فرض از طراحی دسکتاپ، رایانه لوحی و تلفن همراه پشتیبانی می‌کند.

W3.CSS کوچکتر و سریعتر از چارچوب‌های CSS مشابه است.

W3.CSS به عنوان جایگزینی با کیفیت بالا برای Bootstrap طراحی شده‌است.

W3.CSS مستقل از jQuery یا هر کتابخانه جاوااسکریپت دیگر طراحی شده‌است.

Responsive demo.svg


مثال

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<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>

Responsive demo.svg


برای یادگیری بیشتر W3.CSS آموزش W3.CSS ما را مطالعه کنید.


بوت استرپ

فریم ورک محبوب دیگر، بوت استرپ است که از HTML, CSS و jQuery برای ایجاد صفحات وب واکنش‌گرا استفاده می‌کند.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>

Responsive demo.svg


برای یادگیری بیشتر در مورد بوت استرپ به آموزش بوت استرپ ما مراجعه کنید.

منابع آموزشی




به‌روزرسانی شده: ۸ روز پیش