مدیا کوئری Media Queries در CSS
خوش اومدین به بیست و نهمین جلسه از دوره آموزش CSS. ما در جلسات گذشته با امکاناتی آشنا شدیم که به ما اجازه میداد تا حدودی عناصر خودمون رو رسپانسیو یا واکنشگرا کنیم. مثلا یاد گرفتیم که اگر مقدار width هر عنصری رو صد در صد قرار بدیم، جدا از اینکه عرض صفحه چقدر باشه، همیشه عرض صفحه ما رو پر میکنه. یا در مبحث Flexbox یاد گرفتیم که چجوری عناصر رو کنار هم بچینیم که بتونیم اونها رو مرتب کنیم. اما هیچ کدوم از چیزهایی که تا اینجا یاد گرفتیم بدون مدیا کوئری کارایی لازم رو نداره. در حقیقت مهمترین ابزار برای ساخت صفحات Responsive مدیاکوئری است که امروز قراره در موردش صحبت کنیم. از طرفی امروزه با گسترش روزافزون گوشی های موبایل و دیوایس های مختلف در ابعاد گوناگون، طراحی صفحات وب بدون رعایت اصول رسپانسیو، ضربه مهلکی رو به وبسایت ما میزنه و یکی از اصول جدانشدنی از صفحات وب امروزی هست. پس با این جلسه مهم و کاربردی همراه من باشید.
مدیا کوئری در CSS
همونطور که جلوتر گفتم ما با استفاده از مدیا کوئری میتونیم صفحات وب خودمون رو رسپانسیو کنیم. ولی این کار به چه صورتی انجام میشه. قبلا توی CSS2 اومدن و قانون media معرفی شد که توی این نسخه میشد قوانین مختلف media رو به گونه ای تعریف کرد که برای صفحه نمایش های مختلف مثل کامپیوتر و تلویزیون و… باشه. اما این نسخه پشتیبانی زیادی از دستگاه های مختلف نداشت.
این مشکل در CSS3 حل شد و در حال حاضر ما میتونیم برای هر دیوایسی با هر ابعادی استایل اختصاصی تعریف کنیم. همینطور میتونیم برای دیوایس های عمودی و افقی استایل مجزا داشته باشیم. ما امروز قرار هست که مدیاکوپری در CSS3 رو یاد بگیریم.
مدیا کوئری ها میتونن موارد زیر رو چک کنن و این اجازه رو بدن که ما بر اساس این موارد استایل اختصاصی تعریف کنیم:
- عرض و ارتفاع viewport
- عرض و ارتفاع دیوایس
- orientation یا جهت نمایش (عمودی یا افقی)
- resolution یا وضوح صفحه نمایش
این امکان فوق العاده است و به ما این امکان رو میده که صفحه وب خودمون رو برای هر دستگاهی با عرض و ارتفاع متفاوت و یا جهت نمایش عمودی یا افقی و یا وضوح صفحه نمایش متفاوت، استایل متفاوتی قرار بدیم. مثلا صفحه خودمون رو به نحوی طراحی کنیم که روی مانیتور که عرض مثلا بیشتری داره ۳ ستونه نمایش داده بشه و روی گوشی موبایل که عرض کمتری داره تک ستونه نمایش داده بشه. چیزی که امروزه در صفحات وب رسپانسیو اونها رو میبینیم.
ساختار مدیا کوئری
مدیا کوئری میتونه شامل یک یا چند عبارت باشه. در صورتی که شرایط که تعریف شده وجود داشته باشه کدهای داخل مدیاکوئری اجرا میشه.
ساختار کلی مدیاکوئری به شکل زیر هست:
@media not|only mediatype and (expressions) {
CSS-Code;
}
برای تعریف یک مدیاکوئری ابتدا از عبارت @media استفاده میکنیم. مقادیر not و only اختیاری است در ادامه نوع مدیا رو مینویسیم که انواع مدیا رو در پایینتر توضیح دادم و بعد از اون از کلمه and استفاده میکنیم. در مقابل and و در داخل پرانتز شرط موردنظرمون رو مینویسیم، این شرط ها همون مواردی هست که پیشتر گفتیم مدیا کوئری میتونن اونها رو چک کنن. در حقیقت ما در داخل پرانتز میتونیم وضعیت های ۴ گانه که بالا اسم بردیم رو چک کنیم.. بعد از بسته شدن پرانتز از آکولاد باز و بسته استفاده میکنیم و کدهای مدنظرمون رو داخل آکولاد مینویسیم.
انواع مدیا mediatype در CSS3
همونطور که در سینتکس مدیا کوئری دیدیم ما باید نوع مدیا را مشخص کنیم. ما برای این کار ۴ انتخاب داریم:
all : مورد استفاده برای همه دستگاه هاست.
print : مورد استفاده برای همه پرینترها
screen : مورد استفاده برای همه صفحه نمایش های کامپیوتر، تبلت، موبایل
speech : مورد استفاده برای screenreader ها
یک مثال ساده از مدیا کوئری
یکی از راههای استفاده از media query این است که برای یه بخش از css صفحه جایگزین داشته باشیم. مثال زیر رو ببینید:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
در مثال بالا که برای نوع مدیا screen تعریف کردم، اگر عرض صفحه نمایش از ۴۸۰ پیکسل بیشتر باشه، پس زمینه صفحه وب و عنصر body تغییر میکنه.
زمانی که شرط ما برقرار باشه ما میتونیم برای هر یک از عناصر و انتخابگرهای خودمون استایل جدید تعریف کنیم. مثال زیر رو ببینید:
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
شرط این مدیا کوئری دقیقا مثل مثال قبلی است ولی اینجا من استایل دو آی دی رو تغییر دادم. هیچ محدودیتی در قراردادن شرط، تعداد استایل ها و تکرار استفاده از مدیاکوئری وجود ندارد.
ما میتونیم با استفاده صحیح و بجا از Media Queries به راحتی صفات وب خودمون رو responsive کنیم و استایل مناسب هر دستگاه رو برای صفحات وب خودمون اعمال کنیم.
همینطور میتونیم بخشی از عناصر رو توی صفحات موبایل نمایش ندیم یا در صفحه قابل چاپ صفحه وب خودمون تنظیمات اختصاصی اعمال کنیم.
در ویدیو این جلسه مثالهای بیشتری در مورد استفاده از مدیا کوئری موجود هست.
