بسم الله الرحمن الرحیم

آموزش طراحی قالب Responsive

در این بخش قصد دارم به صورت مختصر آموزش ساخت یک قالب Responsive را آموزش دهم. بدون هیچ بحث اضافی سراغ مباحث مربوطه می رویم:

برای نمایش عناصر صفحه در مقایس های مختلف مثل کامپیوتر ها یا تبلت و در نهایت موبایل به نحوی که بتوان اطلاعات را به صورت صحیح نمایش داد نیاز است شما در مورد هر مقایس تصمیمی اخذ نمایید برای این فرایند کافی است از دستور media@ استفاده نمایید. ساختار این دستور بسیار ساده می باشد. در دستور زیر ما مشخص کردیم که اگر خروجی ما صفحه نمایش بود و سایز ما حداقل 1200 پیکسل بود تغییرات مورد نظر صورت گیرد. این کار را به صورت های زیر می توان انجام داد:

درون یک فایل StyleSheet

@media screen and (min-width : 1200px) {  
  /* let's do somethin' */ 
} 

لینک دادن به یک StyleSheet

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="small.css" /> 

در روش بالا اگر سایز ما حداقل 1200 پیکسل بود فایل مشخص شده به صفحه ما اضافه می گردد.

لینک دادن به یک فایل StyleSheet (در صورت موبایل بودن دستگاه یا هر دستگاهی با نهایت وضوح 480 پیکسل)

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" />  

لینک دادن به یک فایل StyleSheet درون دستورات CSS

@import url( small.css ) screen and ( min-width: 1200px );  

استفاده از عملگرهای منطقی

AND

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

OR

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

NOT

@media not all and (max-width: 600px) {
  html { background: red; }
}

Exclusive

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}

Overriding

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

در نهایت یک مثال کامل

@media 
  only screen and (min-width: 100px),
  not all and (min-width: 100px),
  not print and (min-height: 100px),
  (color),
  (min-height: 100px) and (max-height: 1000px),
  handheld and (orientation: landscape)
{
  html { background: red; }
}

مرورگرهایی که دستورات media@ را پشتیبانی می کنند:

• Firefox 3.5+
• Opera 9.5+
• Safari 3+
• Chrome
• Internet Explorer 9+

یک قالب سایت ساده برای آموزش

یک مثال برای طراحی