آموزش responsive در CSS

واکنش گرا (responsive) چیست؟

واکنش گرا باعث می شود صفحه وب ما در همه دستگاه ها خوب به نظر برسد.
واکنش گرا فقط از HTML و CSS استفاده می کند.
واکنش گرا یک برنامه یا جاوا اسکریپت نیست.

طراحی بهترین تجربه برای همه کاربران

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

صفحات وب نباید اطلاعات را متناسب با دستگاه های کوچکتر حذف کنند، بلکه محتوای آن را متناسب با هر دستگاهی تطبیق دهند:

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

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

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
  <h1>تهران</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>شهر تهران</li>
      <li>جاذبه های گردشگری تهران</li>
      <li>غذای تهران</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>شهر تهران</h1>
    <p>تهران پایتخت کشور ایران در قاره آسیا است.</p>
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>تهران کجاست؟</h2>
      <p>پایتخت کشور ایران است.</p>
      <h2>تهران چقدر جمعیت دارد؟</h2>
      <p>حدود 10 میلیون نفر.</p>
      <h2>یکی از جاذبه های گردشگری تهران چیست؟</h2>
      <p>بازار بزرگ تهران.</p>
    </div>
  </div>
</div>

<div class="footer">
  <h3>برای اطلاعات بیشتر با ما تماس بگیرید.</h3>
</div>

</body>
</html>

درگاه نمایش (viewport) چیست؟

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

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

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

تنظیم درگاه نمایش (viewport)

HTML5 روشی را معرفی کرد که به طراحان وب اجازه می دهد از طریق تگ <meta>، کنترل درگاه نمایش را در دست بگیرند.

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

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

قسمت width=device-width، عرض صفحه را طوری تنظیم می کند که عرض صفحه نمایش دستگاه را دنبال کند (که بسته به دستگاه متفاوت خواهد بود).

قسمت initial-scale=1.0، سطح بزرگنمایی اولیه را زمانی که صفحه برای اولین بار توسط مرورگر بارگذاری می شود، تنظیم می کند.

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

Media query چیست؟

Media query یک تکنیک CSS است که در CSS3 معرفی شده است.

از قانون media@ استفاده می کند تا قسمتی از ویژگی های CSS را فقط در صورتی که یک شرط خاص درست باشد، شامل شود.

<!DOCTYPE html>
<html dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: lightgreen;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<p>اندازه پنجره مرورگر را تغییر دهید. هنگامی که عرض این سند 600 پیکسل یا کمتر باشد، رنگ پس زمینه "آبی روشن" است، در غیر این صورت "سبز روشن" است.</p>

</body>
</html>

خلاصه درس

تمرین

مشاهده پاسخ

توسعه دهندگان

اسما علیلو

ویژگی responsive در CSS