طراحی وب: ۳- ریسپانسیو

امروزه ابزارهای گوناگونی با نمایشگرهای کوچک و بزرگ ساخته شده است. از موبایل‌های کوچک ۴ اینچی گرفته تا کامپیوترهایی با مانیتورهای بزرگ به اندازه ۱۰۰ اینچ. و همگی آنها دسترسی به اینترنت دارند. بنابراین هر صفحه‌ای در وب ممکن است در صفحه نمایش کوچک یا بزرگ دیده شود.

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

برای متناسب سازی محتوا چه کارهایی می‌توان کرد؟

• تغییر اندازه هر المنت
• تغییر چیدمان المنت‌ها
• حذف برخی از المنت‌ها

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

آمار کاربران وب پیوسته در حال رشد است. همچنین افزایش کاربران موبایل بسیار بیشتر از کامپیوتر است. و از سال ۲۰۱۶ تعداد کاربران موبایل از کامپیوتر بیشتر شده و همچنان در حال افزایش است.

با توجه به اینکه کاربران موبایل بیشتر مخاطبان ما را تشکیل می‌دهد.  باید هنگام طراحی صفحات، ابتدا به آنها توجه داشت.

در حقیقت در طراحی موبایل مقدم است. (Mobile First)

اجرای دستورات CSS با توجه به نیاز کاربر

@media type and (features) {CSS-Code;}

خروجی‌ها

اغلب کاربر می‌خواهد محتوا را بر روی اسکرین یا نمایشگر ببیند. ولی گاهی می‌خواهد آن را بر روی کاغذ پرینت کند. یا آنکه محتوا برایش خوانده شود.

/* for Screen */
@media screen {

	body {
	background-image: url("bg.gif");
	}
	
}

/* for Print */
@media print {

  body {
    color: Black;
    background: White;
  }

  footer {
    display: none;
  }

}

شرایط

شرایط اسکرین یا نمایشگر نیز تعیین کننده است. همانند اندازه، نسبت طول به عرض، رزولوشن و …

/* Maximum width */
@media (max-width: 768px) {
	main {
		width: 100%;
	}
}

/* Minimum width */
@media (min-width: 1024px) {
	main {
		width: 1024px;
	}
}

/* landscape or portrait */
@media (orientation: landscape) {
	main {
		flex-direction: row;
	}
}

آپریتورهای منطقی Logical Operators

با کمک آپریتورهای منطقی (and, or, not) می توانید چند شرط را با هم ترکیب کنید.

@media screen and (max-width: 768px) {
	main {
		width: 100%;
	}
}

@media (max-width: 768px) and (orientation: landscape) {
	main {
		width: 100%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	main {
		width: 100%;
	}
}

@media print and (min-resolution: 300dpi) {
	p {
		font-family: serif;
	}
}	

@media only screen and (hover: hover) {
	a:hover {
		background-color: Yellow;
	}
}

@media not screen {
	footer {
		display: none;
	}
}

نقاط شکست Breakpoints

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

• موبایل‌ها کمتر از 768px
• مانیتورها بیشتر از 1024px
• تبلت‌ها بین آن دو

@media screen and (max-width: 767px) {
	section {
		width: 100%​;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	section {
		width: 50%;
	}
}

@media screen and (min-width: 1024px) {
	section {
		width: 33%;
	}
}

---

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• با روش مثال بالا تغییراتی در آن بدهید تا همانند ویدیوی زیر باشد.

---

Responsive Text

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

تنها با افزودن یک  دستور calc می‌توان سایز فونت را با اندازه نمایشگر متناسب کرد.

مثال

html {
	font-size: calc(10px + 0.5vw);
}

section { font-size: 1rem; }

p,h1,h2,h3,h4,h5 {
	margin-top: .5em;
	margin-bottom: .25em; 
}

p { font-size: 1em; }

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

---

تمرین ۲

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• با روش مثال بالا تغییراتی در آن بدهید تا همانند ویدیوی زیر باشد.

---

Responsive Image With Art Direction

تصاویر را می‌توان به اندازه اسکرین کوچک یا بزرگ کرد. ولی کوچک شدن بیش از اندازه تصویر ممکن است به هدف ما از گذاشتن آن لطمه بزند.

---

تمرین ۳

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• با روش مثال بالا تغییراتی در آن بدهید تا همانند ویدیوی زیر باشد.

---

جدول ریسپانسیو

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

Example: Collapse Row

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>School</th>
      <th>Major</th>
	</tr>
  </thead>	
  <tbody>
    <tr>
      <td data-label="First Name">Bob</td>
      <td data-label="Last Name">Smith</td>
      <td data-label="School">Stanford University</td>
      <td data-label="Major">Computer Science</td>
    </tr>	
    ...
  </tbody>
</table>

@media screen and (max-width: 768px) {
	table {
		border: 0;
	}
	thead {
		display: none;
	}
	tr {
		display: block;
		margin-bottom: .5em;
	}
	td {
		display: block;
		border-bottom: 1px solid #ddd;
		text-align: left;
	}
	td::before {
		content: attr(data-label)": ";
		font-weight: bold;
	}
	td:last-child {
		border-bottom: 0;
	}
}

گوشه فریم بالا را بگیرید و آن را بزرگ و کوچک کنید و نتیجه را ببینید.