قالب وردپرس شرکتی ممبر فیک
خانه / طراحی سایت / طراحی سایت با طراحی وب واکنشی(طراحی ریسپانسیو) بخش سوم: CSS3 Media Queries

طراحی سایت با طراحی وب واکنشی(طراحی ریسپانسیو) بخش سوم: CSS3 Media Queries

بعد از یادگیری جداول شناور (Fluid Grid) در بخش قبلی، حال می توانیم سراغ مفهوم CSS3 Media Queries برویم و آن را باهم بیاموزیم. در این مفهوم هدف ما اعمال شیوه (style) های خاصی به سند با توجه شرط هایی که ما تعیین می کنیم.

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

همانگونه که مشاهده می کنید عرض بخش اصلی سایت در مانیتور های با پهنای بیشتر از ۱۰۲۴ به صورت معمولی با پهنای ۹۸۰ خواهد بود. در صورتی که در همین وب سایت در مانیتور های با پهنای کوچکتر یا موبایل پهنای بخش اصلی سایت کوچکتر شده است. و همچنین می بینید که در موبایل ستون سمت راست نیز به پایین بخش اصلی رفته است. این امکانات با استفاده از Media Query ها در طراحی سایت فراهم می شود.

ساختار کلی Media Query ها به صورت زیر است:

@media [شرط ها] {

          body {

                   background-color: red;

}

 

// Other styles

}

 

 

 

در بخش ]شرط ها[ می توانید شرط هایی روی عرض یا ارتفاع صفحه و… نمایش نوشت:

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

          body {

                   background-color: red;

}

 

// Other styles

}

در کد بالا استایل زمانی به body اعمال میشود که عرض صفحه نمایش حد اکثر ۹۸۰px باشد. و همچنین شرط screen به این معنی است که تنها برای صفحه نمایش های رنگی کامپیوتر یا گوشی های هوشمند اعمال کردد.

Media Query ها را علاوه بر استفاده در تگ های