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

Ratings
(0)

 

 

مثال شماره 1

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

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

 

امتحان کنید

 

نکته: یک صفحه وب باید در تمام دستگاه ها، خوب به نظر برسد.

تنظیم Viewport

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

مثال شماره 2

<meta name="viewport" content="width=device-width, initial-scale=1.0">
امتحان کنید

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

 

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

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

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

اگر ویژگی width که در CSS وجود دارد، برابر با %100 شود، تصویر ما واکنش گرا خوهد شد و مقیاس آن به درستی کم و زیاد می شود:

مثال شماره 3

<img style="width:100%;" src="/other/img_girl.jpg">
امتحان کنید

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

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

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

مثال شماره 4

<img src="/other/img_girl.jpg" style="max-width:100%;height:auto;">
امتحان کنید

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

عنصر اچ تی ام ال <picture> به ما امکان می دهد تا برای سایزهای مختلف پنجره ی مرورگر، تصاویر مختلفی را تعریف کنیم. پنجره ی مرورگر را تغییر اندازه دهید تا ببینید که تصویر زیر چگونه بسته به عرض مرورگر تغییر می کند:

مثال شماره 5

<picture>
  <source srcset="/other/img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="/other/img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="/other/flowers.jpg">
  <img src="/other/img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
امتحان کنید

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

سایز متن می تواند با واحد vw که مخفف کلمات viewport width است، تنظیم شود. به این طریق، سایز متن از سایز پنجره ی مرورگر پیروی می کند:

سلام به شما

مثال شماره 6

<h1 style="font-size:10vw">سلام به شما</h1>
امتحان کنید

نکته: Viewport به سایز پنجره ی مرورگر گفته می شود. 1vw برابر با 1 درصد از عرض Viewport است. اگر ویوپورت 50 سانتیمتر باشد، آنگاه 1vw برابر با 0.5 سانتیمتر است.

استفاده از مدیا کوئری ها در HTML

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

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

منوی سمت چپ

محتوای اصلی

محتوای سمت راست

 

مثال شماره 7

<style>
* {
  box-sizing:border-box;
}

.left {
  background-color:#2196F3;
  padding:20px;
  float:left;
  width:20%; /* عرض به طور پیش فرض 20 درصد است */
}

.main {
  background-color:#f1f1f1;
  padding:20px;
  float:left;
  width:60%; /* عرض به طور پیش فرض 60 درصد است */
}

.right {
  background-color:#4CAF50;
  padding:20px;
  float:left;
  width:20%; /* عرض به طور پیش فرض 20 درصد است */
}

/* استفاده از یک مدیا کوئری برای اضافه کردن نقطه شکست در 800 پیکسل */

@media screen and (max-width:800px) {
  .left, .main, .right {
    width:100%; /* وقتی که ویوپورت 800 پیکسل یا کمتر شود، عرض برابر با 100 درصد می شود */
  }
}
</style>
امتحان کنید

 

صفحه وب واکنشگرا به طور کامل

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

مثال شماره 8

امتحان کنید

 

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

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

استفاده از فریم ورک W3.CSS

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

مثال شماره 9

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://sina2.ir/images/all/code/w3/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>w3.css مثالی از </h1> 
  <p>این صفحه را تغییر اندازه دهید</p> 
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>تهران</h2>
    <p>تهران پانزدهمین شهر پرجمعیت جهان با مساحت ۷۳۰ کیلومتر مربّع است که به همراه توابع خود جمعیتی بالغ بر ۱۴ میلیون نفر دارد. </p>
  </div>

  <div class="w3-third">
    <h2>شیراز</h2>
    <p>شهر شیراز مرکز استان فارس و پنجمین شهر بزرگ و پر جمعیت ایران است. مساحت آن تقریبا معادل 240 متر مربع بوده وجمعیت آن معادل 1565572 نفراست.</p>
  </div>

  <div class="w3-third">
    <h2>خرامه</h2>
    <p>شهر خرامه، شهری است در شهرستان خرامه استان فارس در جنوب ایران. این شهرستان دارای دو بخش می باشد:۱- بخش مرکزی خرامه با جمعیتی حدود ۴۰۲۰۰ نفر و بخش کربال به مرکزیت سلطان شهر با جمعیتی حدود ۲۱۷۰۰ نفر .</p>
  </div>
</div>

</body>

</html>
امتحان کنید

 

استفاده از فریم ورک بوت استرپ

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

مثال شماره 10

<!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://sina2.ir/images/all/code/bootstrap3.3.7/bootstrap.min.css">
  <script src="https://sina2.ir/images/all/code/bootstrap3.3.7/bootstrap.min.js"></script>
  <script src="https://sina2.ir/images/all/code/bootstrap3.3.7/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>اولین صفحه بوت استرپ من</h1>
    <p>صفحه را تغییر اندازه دهید تا نتیجه را مشاهده کنید</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>ستون 1</h3>
      ...
    </div>
    <div class="col-sm-4">
      <h3>ستون 2</h3>
      ...
    </div>
    <div class="col-sm-4">
      <h3>ستون 3</h3>        
      ...
    </div>
  </div>
</div>

</body>

</html>
امتحان کنید

 

  • بازدید: 380

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال