میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

مدیا کوئری ( Media query ) در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش مدیا کوئری ( Media query ) در CSS با من همراه باشید.

Media query از تکنیک های جدید css است که از css3 به بعد عرضه شده است. این ویژگی در واقع یک سری خصوصیات از css است، که دستورات تعیین شده ای را، در صورت درست بودن یک شرط خاص، عمل می کند.

با استفاده از ویژگی Media query ، می توانیم تعیین کنیم در صورت درست بودن یک شرط اعمالی روی یک یا چند عنصر html اعمال شود.

مثال : در مثال زیر اگر اندازه پنجره مرورگر ۶۰۰ پیکسل یا کوچکتر باشد ، رنگ پس زمینه صفحه وب به آبی روشن تغییر می کند:

مثال : نمونه ای ساده از media query
@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

افزودن نقاط توقف (breakpoint)

ما می توانیم با استفاده از این ویژگی یک نقطه پایانی (breakpoint) اضافه کنیم.

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

مثال: زمانی که اندازه مرورگر از  ۷۶۸ پیکسل کوچکتر شود، عرض هر کدام از ستون ها، ۱۰۰ درصد شود:

مثال : ایجاد break points
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

همیشه ابتدا برای صفحه موبایل طراحی را انجام دهید

سعی کنید ابتدا طرحی را برای صفحه موبایل انجام دهید و سپس برای صفحات دسکتاپ تنظیم کنید.

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

این به این معنی است که باید تغییرات در مثال css قبلی اعمال کنیم:

مثال : طراحی اولیه برای موبایل

 

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

 


افزودن break point های بیشتر

برای سایر اندازه های صفحه نمایش (مانند تب لت ها) نیز باید تنظیمات Media query را اعمال کنید.

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

مثال: علاوه بر کلاس  ” -col” که برای دسکتاپ تعریف کرده ایم ، کلاس  ” col-s” را نیز برای صفحه تب لت ، ایجاد می کنیم:

مثال : 

اینکار برای مدیریت ستون ها در کد html به ما کمک می کند.

مثال: در مثال زیر برای دسکتاپ بخش اول  و سوم دارای ۳ه ستون و بخش میانی ۶ ستون را شامل می شود.

برای تب لت ، بخش اول ۳ ستون بخش میانی ۹ ستون ، و بخش پایانی ۱۲ ستون را در بر می گیرد:

مثال : طراحی برای دو دستگاه

 

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

 


انواع break point ها در دستگاههای مختلف

تعدا زیاد دستگاه با صفحه هایی با اندازه های مختلف وجود دارد ، بنابراین طراحی break point برای هر کدام کار سختی است.

برای اینکه اینکار ساده تر شود ، می توانید از پنج گروه زیر استفاده کنید:

مثال : ایجاد انواع break points
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

تشخیص عمودی یا افقی بودن صفحه در Media query

Media query تغییر حالت عمودی یا افقی صفحه مرورگر را تشخیص می دهد. و شما می توانید برای این تغییر حالت نیز قانون تعریف کنید:

مثال:

مثال : تبدیل حالت orientation
@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

سایر مثال ها از کاربرد Media query

می توانید برای ویژگی های مختلف ، عناصر ، در Media query ، قوانین خاصی را تعریف کنید:

مثال ۱: مخفی کردن عناصر در Media query (اگر عرض ۶۰۰ پیکسل یا کمتر شود ، عنصر مخفی می شود):

مثال : مخفی کردن عناصر
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

مثال ۲: تغییر دادن font size با Media query:

مثال : اندازه ی فونت متغییر

امیدواریم آموزش مدیا کوئری ( Media query ) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssmedia query در cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسیمدیا کوئری در CSS
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟