توسط مدیا کوئری ها در css می توانیم المان های خودمان را نسبت به عرض صفحه نمایشگر کاربر چیدمان کنیم و استایل های مختلفی برای سایز های متفاوت نمایشگر داشته باشیم. در این لینک و این لینک بصورت کامل توضیح داده شده است، ما نیز یکسری توضیحات عامیانه ای را در مقاله مطرح می کنیم.
کدهای مدیا کوئری رو می تونیم در میان کد های CSS بنویسیم، ولی کار بهینه تری هم میشه کرد، و اونم برای هر سایز یک فایل css ایجاد بکنیم و اون رو در صفحه html خودمون فراخوانی کنیم. اینطوری مدیریت کدهاش برامون آسون تر خواهد بود.
<!-- مخصوص صفحه پرینت -->
<link rel="stylesheet" media="print" href="print.css">
<!-- مخصوص نمایشگر -->
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="example2.css">کدهای css مدیا کوئری ها بصورت زیر نوشته میشه، و معمولا در زمان استفاده از min-width hc کوچکترین سایز نمایشگر به بزرگترین سایز ترتیب بندی می کنیم و در زمان استفاده از max-width معمولا از بزرگترین عدد به کوچکترین عدد ترتیب بندی می کنیم، نمونه کد زیر رو مشاهده کنید:
/* min */
@media screen and (min-width: 480px) {
body { background-color: lightgreen; }
}
@media screen and (min-width: 680px) {
}
@media screen and (min-width: 980px) {
}
/* max */
@media screen and (man-width: 1280px) {
body { background-color: lightgreen; }
}
@media screen and (man-width: 980px) {
}
@media screen and (man-width: 570px) {
}