ریسپانسیو کردن با HTML

طراحی وب سایت ریسپانسو یا واکنشگرا در مورد ایجاد صفحات وبی بوده که در تمامی دستگاه ها (کامپیوتر،تلفن همراه و…) به خوبی نمایش داده شود.

هدف از ارائه این آموزش، یادگیری طراحی اصولی واکنشگرای صفحات وب با HTML است تا بتوان خروجی و چینش صحیح صفحه وب خود را بر روی ابزارهای نمایشی مختلفی که در بازار موجود هستند، پوشش داد.

در نظر داشته باشید جدا از اینکه طراحی واکنش گرا یا Responsive باعث می‌شود صفحات سایت شما در تمام دستگاه‌ها (دسکتاپ، تپلت و گوشی‌های موبایل) به خوبی نمایش داده شود،

در سئو وب سایت شما نیز تاثیر بسیار زیادی دارد. زیرا از دیدگاه گوگل وب سایتی که ریسپانسیو باشد در نتایج جستجو بیشتر نمایش داده میشود.

طراحی سایت ریسپانسیو چیست؟

بطور کلی طراحی وب ریسپانسیو در مورد استفاده از HTML و CSS برای تغییر اندازه خودکار، کوچک کردن یا بزرگ‌نمایی یک وب‌سایت، به منظور زیبا جلوه دادن آن در همه دستگاه‌ها است،یعنی اینکه سایت ما این قابلیت یا قدرت رو داشته باشد تا بتواند روی انواع صفحه نمایش ها ( مثل گوشی های موبایل ، تبلت ها و.. ) بدون هیچ مشکلی نمایش داده شود.

تنظیم Viewport در Html

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

<meta name="viewport" content="width=device-width, initial-scalehttps://upweb.ir/wp-admin/post.php?post=15069&action=edit#=1.0">

1	<meta name="viewport" content="width=device-width, initial-scalehttps://upweb.ir/wp-admin/post.php?post=15069&action=edit#=1.0">

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

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

تصاویر ریسپانسیو در Html

تصاویر ریسپانسیو تصاویری هستند که برای انطباق با هر نوع اندازه مرورگری تغییر سایز پیدا می‌‌کنند.

با استفاده از ویژگی width
اگر ویژگی width روی 100٪ تنظیم شود، تصویر به صورت واکنش گرا خواهد بود و افزایش یا کاهش اندازه خواهد یافت:

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

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

پیش نمایش

ویژگی max-width در HTML

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

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

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

پیش نمایش

نمایش تصاویر متفاوت با توجه به عرض مرورگر در Html

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

مثلا تصور کنید در حالت عادی صفحه نمایش یک گلدان پر از گل به طور کامل نمایش می‌یابد. هرچه اندازه صفحه را کوچک‌تر کنید طبق دستورالعملی که قبلا به مرورگر داده‌اید تصویر در انداره کوچکتر مرورگر به تصویر دیگری تغییر پیدا میکند. در انتها اگر صفحه را به کوچک‌ترین حالت ممکن تغییر دهید تصویر دیگری نمایش می‌یابد.

پیش نمایش مثال

اندازه متن ریسپانسیو در Html

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

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

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

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

پیش نمایش

مدیا کوئری در Html

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

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

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

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

پیش نمایش

صفحه وب ریسپانسیو یا واکنشگرا در Html-مثال کامل

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

پیش نمایش

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

همه فریمورک های محبوب CSS طراحی واکنشگرا ارائه می دهند.

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

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

فریمورک بوت استرپ

یکی از فریم‌ورک‌های بسیار محبوب CSS، فریم‌ورک بوت استرپ (Bootstrap) است که از HTML، CSS و جی کوئری (jQuery) برای ایجاد صفحات واکنش گرا استفاده می‌کند:

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

<!DOCTYPE html>

<head>

<title>Bootstrap 5 Example</title>

</head>

<body>

<h1>My First Bootstrap Page</h1>

<p>Resize this responsive page to see the effect!</p>

</div>

<h3>Column 1</h3>

<p>Lorem ipsum...</p>

</div>

<h3>Column 2</h3>

<p>Lorem ipsum...</p>

</div>

<h3>Column 3</h3>

<p>Lorem ipsum...</p>

</div>

پیش نمایش

ریسپانسیو کردن با HTML

طراحی سایت ریسپانسیو چیست؟

تنظیم Viewport در Html

تصاویر ریسپانسیو در Html

ویژگی max-width در HTML

نمایش تصاویر متفاوت با توجه به عرض مرورگر در Html

اندازه متن ریسپانسیو در Html

مدیا کوئری در Html

صفحه وب ریسپانسیو یا واکنشگرا در Html-مثال کامل

فریمورک بوت استرپ

امیدواریم این آموزش برای شما مفید واقع شده باشد.