مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در بخش قبلی به مبحث Flexbox در css که برای طراحی صفحات وب responsive کاربرد بسیاری دارد اشاره کردیم ، اما استفاده از تکنیک هایی از جمله Flexbox در طراحی به تنهایی عملکرد responsive را فراهم نمی کند. در واقع تکنیک اصلی که قوانین responsive را تعریف می کند ، قوانین Media Querie در CSS می باشد. که در واقع نوع چیدمان عناصر و طراحی صفحات وب را برای صفحه نمایش ها و اندازه های مختلف مرورگر تعریف می کند، در ادامه این مبحث ما شما را با ساختار کلی مدیا کوئری در CSS آشنا می کنیم.
Media Querie در CSS
در ادامه ی آموزش مباحثی از جمله مفاهیم، ساختار اصلی و طرز استفاده از Media Querie در CSS بررسی شده است.
مروری بر سابقه Media Querie در CSS
Media Querie در CSS2
قانون media، معرفی شده در CSS2، امکان تعریف قوانین Style مختلف برای انواع مختلف رسانه ها را فراهم کرد.
شما در این نسخه می توانید قوانین مختلف media را برای صفحه نمایش های مختلف مانند کامپیوتر، تلوزیون و … تعریف کنید.
اما این نسخه پشتیبانی زیادی از دستگاه های مختلف نداشتند.
Media Querie در CSS3
Media Querie در CSS3 از CSS2 توسعه پیدا کرد و بجای در نظر گرفتن دستگاه ها ، قابلیت و اندازه صفحه نمایش در نظر گرفته می شود.
Media Querie ها می توانند موارد زیر را چک کنند:
- عرض و ارتفاع viewport
- عرض و ارتفاع دستگاه
- orientation (جهت گیری)
- resolution
Media Querie ها در واقع یک Style مناسب برای صفحات وب در دستگاه های دسکتاپ ، لپ تاپ ، تب لت ، موبایل و … را تعریف می کنند.
پشتیبانی در مرورگرها
اعداد داخل جدول اولین نسخه از مرورگر را که از قوانین @media پشتیبانی می کنند را نشان می دهد:
| ویژگی | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|
| @media | ۲۱٫۰ | ۹٫۰ | ۳٫۵ | ۴٫۰ | ۹٫۰ |
ساختار media query
یک media query می تواند شامل یک یا چند عبارت باشد که در شرایطی که تعریف شده اجرا شود.
مثال :
| @media not|only mediatype and (expressions) { CSS-Code; } |
اگر عرضی که در media query مشخص شده با عرض مرورگر یا دستگاه مطابقت داشته باشد، عبارات داخلی media query اجرا می شود.
همچنین می توانیم از عملگرهای not یا only نیز برای سفارشی کردن قوانین استفاده کنیم.
شما همچنین می توانید یک style را به قوانین یک media query نسبت دهید:
مثال :
| <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css"> |
انواع media در CSS3
| مقدار | توضیحات |
|---|
| all | مورد استفاده برای تمام دستگاه های نوع media است |
| print | مورد استفاده برای تمام پرینترها |
| screen | مورد استفاده برای صفحه نمایش های کامپیوتر، تب لت ، موبایل |
| speech | مورد استفاده برای screenreader |
یک مثال ساده از media querie
یکی از راه های استفاده از media querie این است که برای یک بخش از CSS صفحه جایگزین داشته باشیم.
در مثال زیر در صورتی که عرض صفحه نمایش از ۴۸۰px کم تر شود ، رنگ پس زمینه ی صفحه وب تغییر می کند:
مثال : یک نمونه از کاربرد media_queries
| @media screen and (min-width: 480px) { body { background-color: lightgreen; } } |
در مثال زیر نیز دو CSS جداگانه برای زمانیکه عرض مرورگر از ۴۸۰px کمتر شود تعریف کرده ایم:
مثال : مثالی دیگر از media_queries
| @media screen and (min-width: 480px) { #leftsidebar {width: 200px; float: left;} #main {margin-left: 216px;} } |
کلام آخر
با استفاده ی صحیح از عملکرد Media Querie در CSS می توانید وب سایت خود را بخوبی responsive کرده و style مناسب با هر دستگاه را برای صفحات وب خود اعمال کنید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
