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

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

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

بهزاد میرزازاده بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

191

پرسش و پاسخ

0
طراحی وب سایت واکنش گرا  یا ریسپانسیو در HTML

طراحی وبسایت واکنشگرا (Responsive) در HTML

طراحی وب رسپانسیو (Responsive) چیست؟

طراحی وب سایت رسپانسیو (Responsive) یعنی اینکه با استفاده از HTML و سی اس اس - CSS (کوچک کردن المنت، بزرگ کردن المنت و در کل تغییر اندازه المنت و یا حتی پنهان کردن المنت) یک وب سایت را به نوعی طراحی کنید که در تمام اندازه های صفحه نمایش دستگاه های مختلف (کامپیوتر، تبلت، موبایل) به خوبی، درست و زیبا نمایش داده شود.

تنظیم viewport

همانطور که در مقالات قبل نیز گفتیم اولین اقدام برای ایجاد یک وب سایت ریسپانسیو در html، اضافه کردن برچسب viewport به تمام صفحات وب سایت است.

مثال: در زیر متا تگ viewport را برای وب سایت واکنشگرا آماده کرده ایم.

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

تنظیم viewport در HTML برای ریسپانسیو

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

مثال: این مثال را در مقالات قبل یک بار برای شما آوردیم و در این جا برای بار دوم آن را به شما نمایش می دهیم که اهمیت متا تگ viewport را متوجه شوید. در زیر دو مثال آورده ایم که یکی از آن ها از متا تگ viewport استفاده می کند ولی دیگری از آن استفاده نمی کند.

تنظیم viewport در HTML برای ریسپانسیو

تصاویر واکنشگرا یا ریسپانسیو (Responsive) در html

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

استفاده از ویژگی width

اگر ویژگی width در CSS را با مقدار 100% تنظیم کنیم، مقیاس آن با هر اندازه از مرورگر بالا و پایین می شود و یک تصویر Responsive ایجاد می شود.

مثال: در زیر با مشخص کردن ویژگی width یک تصویر واکنشگرا ایجاد کرده ایم.

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

تصاویر واکنشگرا یا ریسپانسیو (Responsive) در html

توجه داشته باشید در تصویر بالا تصویر را می توان بزرگتر از اندازه  اصلی خود بزرگ کرد. برای حل مشکل، به جای آن از ویژگی max – width استفاده کنید که راه حل معمولی است.

استفاده از ویژگی max – width

اگر ویژگی max – width روی 100% تنظیم شود، در صورت لزوم تصویر بزرگ می شود اما هرگز از اندازه اصلی خود بزرگ تر نمی شود.

مثال: در این جا همان مثال بالا را این بار با ویژگی max – width برای شما آورده ایم تا تغییرات را ببینید.

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

تصاویر واکنشگرا یا ریسپانسیو (Responsive) در html

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

عنصر 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>

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

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

اندازه متن واکنشگرا یا ریسپانسیو

اندازه متن را می توان با واحد “VW” تنظیم کرد، که به معنای عرض viewport است.

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

مثال: در زیر متن با واحد “VW” مقدار دهی شده و اندازه آن بسته به اندازه عرض پنجره مرورگر است.

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

اندازه متن واکنشگرا یا ریسپانسیو در HTML

اندازه متن واکنشگرا یا ریسپانسیو در HTML

نکته: viewport اندازه پنجره مرورگر است.

1 VW  =  1% عرض viewport

اگر عرض viewport 50 سانتی متر باشد، 1 VW برابر با 0/5 سانتی متر است.

Media Queries

اعلاوه بر تغییر اندازه متن و تصویر، استفاده از media queries نیز در طراحی وب واکنشگرا نیز رایج و متداول است.

با media queries می توانید سبک های کاملا متفاوتی را برای اندازه های مختلف مرورگر تعریف کنید.

مثال: در این جا ما سه عنصر div داریم که در صفحه های کوچک به صورت عمودی و در صفحه های بزرگ به صورت افقی قرار می گیرند.

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

Media Queries در HTML برای ریسپانسیو

Media Queries در HTML برای ریسپانسیو

نکته : در آینده در مبحث CSS مقالات آموزشی مفصلی در مورد media queries خواهیم داشت.

Framework های طراحی وبسایت واکنشگرا

تقریبا همه framework های CSS از قابلیت طراحی واکنشگرا به خوبی پشتیبانی می کنند که همه آن ها به صورت رایگان عرضه شده اند و کار با آن ها بسیار ساده است.

W3.CSS

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

W3.CSS کوچک تر و سریع تر از سایر framework های CSS است.

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

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

مثال: نمونه طراحی واکنشگرا با چهارچوب (framework) W3.CSS.

<!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>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</div>

</body>
</html>

Framework های طراحی وبسایت واکنشگرا در HTML

Framework های طراحی وبسایت واکنشگرا در HTML

نکته: در آینده مجموعه مقالاتی در مورد چهارچوب W3.CSS برای شما آماده خواهیم کرد.

Bootstrap

یکی دیگر از چهارچوب های بسیار محبوب CSS برای طراحی وب سایت های واکنشگرا است که برای ایجاد این نوع صفحات از HTML، CSS و jquery استفاده می کند.

مثال: در زیر یک نمونه از طراحی وبسایت واکنشگرا با چهارچوب bootstrap را برای شما آورده ایم.

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

Framework های طراحی وبسایت واکنشگرا در HTML

Framework های طراحی وبسایت واکنشگرا در HTML