آموزش ساخت سایت ریسپانسیو بخش دوم

آموزش ساخت سایت ریسپانسیو بخش دوم

شناسه: 128 آخرین ویرایش: شنبه 02 خرداد 1394

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

سینتکس مدیا کوئری ها

@media not|only mediatype and (media feature) {
CSS-Code;
}

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

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

تغییر ابعاد قالب به کمک مدیا کوئری ها

فرض کنید پهنای هدر و فوتر وب سایت شما 1000 پیکسل است، در این صورت اگر بخواهید در تبلتها پهنای هدر و فوتر را کم کنید باید از این کد استفاده کنید:

@media screen and (min-width: 768px) and (max-width: 991px){
#header { width: 768px; margin:0 auto; }
#footer { width: 768px; margin:0 auto; }
}

در گوشی های موبایل پهنای هدر و فوتر باید به این صورت باشد:

@media screen and (max-width: 767px) {
#header { width: 100%; margin:0 auto; }
#footer { width: 100%; margin:0 auto; }
}

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

لازم به ذکر است که در گوشی های موبایل همه ستونها باید بصورت عمودی و زیر یکدیگر قرار گیرند و عرض آنها باید برحسب درصد مشخص شود.

برای مشاهده عملی این موضوع کافی است ابعاد مرورگر خود را تغییر دهید تا تغییرات قالب وب سایت اهواز نت را مشاهده کنید.