آموزش طراحی سایت ریسپانسیو (واکنش گرا)با css3 (بخش2)

طرز کار  با مدیاکوئری ها :

پس از آشنایی با واژه ریسپانسیو و تعریف مدیاکوئری ها و قابلیتهای آنها نوبت به روش کار با مدیاکوئری در طراحی صفحات واکنش گرا  می رسد .

به مثال زیر توجه کنید :

 

@media screen and (min-width:720px) {

Div {

Width : 80%;

Height : 200px;

Background : #3cc;

}

}

@media : واژه کلیدی مدیاکوئری است

screen : نشانگر صفحه نمایش دستگاه هایی است که کاربران توسط آنها از وب سایت بازدید می کنند .

and : اگر عبارت داخل پرانتز با screen  برابر باشد مدیاکوئری اجرا خواهد شد .

min-width:720px : کمترین عرض برابر با 720px باشد .

به طور کلی استایل نوشته شده برای تگ div برای دستگاه های با عرض بیشتر از 720px  قابل اجرا است.

 

مثال:

 

@media screen and (max-width:480px) {

Div {

Width : 100%;

Height : 200px;

Background : #3cc;

}

}

 

درمثال بالا استایل در نظر گرفته شده برای تگ div تنها برای دستگاه های با عرض کمتر از  px 480 اجرا خواهد شد .

چنانچه بخواهیم مدیاکوئری در مرورگر های قدیمی اجرا نشود می توانیم از عملگر only پیش از  screen استفاده کنیم.

 

در نوشتن مدیاکوئری به چند روش می توان عمل کرد:

یک روش اینکه تمام استایل های مربوط به یک رزولیشن ( مانند بزرگتر از 1024 پیکسل ) را درون یک مدیاکوئری قرار داد و روش دیگر اینکه برای هر قسمت با توجه به دستگاه های مختلف چند مدیاکوئری نوشت ( مانند روش بکار گرفته شده درbootstrap  ) که این بستگی به سلیقه طراح دارد .

 

نکات قابل توجه در طراحی سایت ریسپانسیو :

- تا جایی که امکان دارد واحدهای اندازه گیری را به درصد بدهید نه به پیکسل .

- از عکس هایی استفاده شود که در رزولیشن های بالا کیفیت عکس ها خراب نشود .

- در رزولیشن های پایین قسمت های غیر ضروری حذف شوند. مانند تبلیغات .

- با کم شدن عرض دستگاه ها تعداد ستون های سایت کمتر شده و در نهایت در دستگاه های با عرض خیلی کم مانند موبایل ها تعداد ستونها به یک برسد .

 

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

امیدوارم که مورد توجه قرار گرفته باشد .


تمام حقوق مادی و معنوی این ساین متعلق به mojtaba khodadadi میباشد
  
2016 - 2020