سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه قبل به کار با ویژگی max-width پرداختیم و آموختیم که این ویژگی حداکثر عرض یک عنصر را تعیین می کند.
در این جلسه به ارائه آموزش کار با ویژگی media@ در CSS می پردازیم.
آموزش کار با ویژگی media@ در CSS
به مثال زیر توجه نمایید؛ در این مثال وقتی پنجره مرورگر ۶۰۰ پیکسل یا کمتر باشد، رنگ پس زمینه عنصر <body> به lightblue (آبی روشن) تغییر می یابد.
مثال :
| @media only screen and (max-width: 600px) { body { background-color: lightblue; } } |
تعریف و کاربرد
از قانون media@ استفاده می شود تا استایل های مختلف برای media types/devices اجرا شود.
می توان از Media queries برای چک کردن موارد متعددی چون موارد زیر استفاده کرد:
- عرض و ارتفاع viewport
- عرض و ارتفاع device
- جهت یابی (آیا تبلت/ تلفن همراه در حالت افقی یا حالت عمودی است یا خیر)
- وضوح یا resolution
استفاده از media queries ها روشی محبوب برای ارائه یک style sheet (طراحی وب پاسخگو) به دسک تاپ ، لپ تاپ ، تبلت و تلفن های همراه است.
می توان با استفاده از media queries ها استایل های مشخصی را برای اسناد پرینت شده و یا برای صفحه رندر تعیین کرد.
علاوه بر media types ها ویژگی های media دیگری نیز وجود دارد. ویژگی های media از طرق تست ویژگی خاص user agent یا نمایش device، جزئیات بیشتری را برای media queries ها فراهم می کند. برای مثال می توانید استایل ها را فقط برای صفحه هایی که بزرگتر یا کوچکتر از یک اندازه خاص هستند، اعمال کنید.
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی media@ در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| media@ | ۲۱ | ۳٫۵ | ۹ | ۴٫۰ | ۹ |
سینتکس CSS
مثال :
| @media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS-Code; } |
معانی کلمات not و only و and
not
کلمات غیر کلیدی معنی کل یک media query را بر می گرداند.
only
کمه کلیدی only مانع از این می شود که مرورگر های قدیمی که media queries ها را به همراه ویژگی های media پشتیبانی نمی کنند، به اجرای استایل های خاص بپردازند. این موضوع تاثیری بر مرورگرهای جدید ندارد.
and
کلمه کلیدی and یک ویژگی media را با یک media type یا سایر ویژگی های media ترکیب می کند.
هر سه مورد فوق اختیاری هستند اما اگر اقدام به ساتفاده از not و یا only کنید؛ در آن صورت باید یک media type را مشخص نمایید.
علاوه بر همه این ها می توانید یک stylesheets متفاوتی را برای media متفاوت داشته باشید؛ مانند نمونه زیر :
مثال :
| <link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"> <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css"> .... |
در ادامه آموزش کار با ویژگی media@ در CSS بیایید با media types ها آشنا شویم.
Media Types (انواع Media)
| مقدار | توضیحات |
|---|
| all | پیش فرض برای کلیه دستگاههای از media type استفاده می شود. |
| print | برای چاپگرها -printers- استفاده می شود. |
| screen | مورد استفاده برای صفحه نمایش رایانه، تب لت ها، تلفن های هوشمند و غیره. |
| speech | مناسب برای فیلم های صفحه نمایش که صفحه را با صدای بلند “می خواند-reads-“. |
ویژگی های Media
| مقدار | توضیحات |
|---|
| any-hover | آیا مکانیسم ورودی موجود به کاربر اجازه می دهد عناصر را معلق کند؟ (اضافه شده در Media Queries سطح ۴) |
| any-pointer | آیا مکانیزم ورودی در دسترس وسیله ای برای نشان دادن است و اگر چنین است ، چقدر دقیق است؟ (اضافه شده در Media Queries سطح ۴) |
| aspect-ratio | نسبت بین عرض و ارتفاع viewport |
| color | تعداد بیت ها در هر جزء رنگ برای device خروجی. |
| color-gamut | محدوده تقریبی رنگ هایی که توسط user agent و device خروجی پشتیبانی می شوند. (اضافه شده در Media Queries سطح ۴) |
| color-index | تعداد رنگ هایی که device می تواند نمایش دهد. |
| grid | این که آیا این device یک grid است یا یک bitmap. |
| height | ارتفاع viewport |
| hover | آیا مکانیزم ورودی اصلی به کاربر امکان می دهد عناصر را معلق کند؟ (اضافه شده در Media Queries سطح ۴) |
| inverted-colors | آیا مرورگر یا سیستم عامل اصلی رنگ ها وارونه را دارد؟ (اضافه شده در Media Queries سطح ۴) |
| light-level | سطح نور فعلی محیط (اضافه شده در Media Queries سطح ۴) |
| max-aspect-ratio | حداکثر نسبت بین عرض و ارتفاع محدوده نمایش. |
| max-color | حداکثر تعداد بیت ها در هر مؤلفه رنگ برای device خروجی. |
| max-color-index | حداکثر تعداد رنگ هایی که device می تواند نمایش دهد. |
| max-height | حداکثر ارتفاع ناحیه نمایش، مانند پنجره مرورگر. |
| max-monochrome | حداکثر تعداد بیت ها به ازای هر “color” در device های تک رنگ (greyscale) |
| max-resolution | حداکثر وضوح device، با استفاده از dpi یا dpcm. |
| max-width | حداکثر عرض محدوده نمایش، مانند پنجره مرورگر. |
| min-aspect-ratio | حداقل نسبت بین عرض و ارتفاع محدوده نمایش. |
| min-color | حداقل تعداد بیت در هر مؤلفه رنگ برای device خروجی. |
| min-color-index | حداقل تعداد رنگ هایی که device می تواند نمایش دهد. |
| min-height | حداقل ارتفاع محدوده نمایش، مانند پنجره مرورگر. |
| min-monochrome | حداقل تعداد بیت ها به ازای هر “color” در device های تک رنگ (greyscale). |
| min-resolution | حداقل وضوح device، با استفاده از dpi یا dpcm. |
| min-width | حداقل عرض محدوده نمایش مانند پنجره مرورگر. |
| monochrome | تعداد بیت ها به ازای هر “color” در device های تک رنگ (greyscale). |
| orientation | جهت یابی viewport (حالت افقی یا عمودی). |
| overflow-block | چگونگی کنترل device خروجی بر محتوا که viewport را در امتداد محور بلوک سرریز می کند. (اضافه شده در Media Queries سطح ۴) |
| overflow-inline | آیا می توان محتویاتی را که از viewport در امتداد محور ورودی سرریز می شود؛ کنترل کرد؟ (اضافه شده در Media Queries سطح ۴) |
| pointer | آیا مکانیزم ورودی اصلی یک device اشاره گر است و اگر چنین است، چقدر دقیق است؟ (اضافه شده در Media Queries سطح ۴) |
| resolution | وضوح device خروجی، با استفاده از dpi یا dpcm. |
| scan | روند اسکن device خروجی. |
| scripting | آیا اسکریپت (مانند JavaScript) در دسترس است؟ (اضافه شده در Media Queries سطح ۴) |
| update | device خروجی به چه میزانی قادر است که ظاهر محتوا را تغییر دهد؟ (اضافه شده در Media Queries سطح ۴) |
| width | عرض viewport |
در ادامه آموزش کار با ویژگی media@ در CSS چندین مثال ارائه شده است که می تواند در درک بهتر مطالب این جلسه مفید باشد.
مثال های بیشتر
مثال یک
پنهان کردن یک عنصر وقتی عرض مرورگر ۶۰۰ پیکسل یا کمتر است:
مثال :
| @media screen and (max-width: 600px) { div.example { display: none; } } |
مثال دو
اگر viewport بین ۸۰۰ و ۸۰۰ پیکسل عرض یا عریض تر باشد ، از media queries ها برای تنظیم رنگ پس زمینه به رنگ lavender استفاده می کنیم تا در صورت نمایش بین ۴۰۰ تا ۷۹۹ پیکسل عرض داشته باشیم و نورپردازی تا حدی مناسب باشد. اگر viewport کوچکتر از ۴۰۰ پیکسل باشد، رنگ پس زمینه به صورت آبی روشن یا lightblue خواهد بود.
مثال :
| body { background-color: lightblue; } @media screen and (min-width: 400px) { body { background-color: lightgreen; } } @media screen and (min-width: 800px) { body { background-color: lavender; } } |
مثال سه
ساخت یک منوی ناوبری پاسخگو که به صورت افقی در صفحه های بزرگ و عمودی در صفحه های کوچک نمایش داده می شود :
مثال :
| @media screen and (max-width: 600px) { .topnav a { float: none; width: 100%; } } |
مثال چهار
استفاده از media queries برای ساخت یک ستون layout پاسخ گو یا responsive :
مثال :
| /* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) { .column { width: 50%; } } /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } } |
مثال پنج
استفاده از media queries برای ساخت یک وبسایت پاسخگو یا responsive :
مثال شش
بسته به جهت گیری مرورگر می توانید از نمایش داده های رسانه یا Media queries نیز استفاده کنید. شما می توانید مجموعه ای از ویژگی های CSS را داشته باشید که فقط در صورت عریض تر بودن پنجره مرورگر از ارتفاع آن، جهت گیری موسوم به جهت گیری Landscape را اعمال نماید.
اگر جهت در حالت افقی قرار داشته باشد در آن صورت می توانید از رنگ پس زمینه lightblue استفاده کنید:
مثال :
| @media only screen and (orientation: landscape) { body { background-color: lightblue; } } |
مثال هفت
استفاده از media queries ها برای تنظیم رنگ متن هنگام نمایش سند روی صفحه، و استفاده از رنگ سیاه در هنگام پرینت :
مثال :
| @media screen { body { color: green; } } @media print { body { color: black; } } |
و به عنوان آخرین مطلب در آموزش کار با ویژگی media@ در CSS به مثال زیر توجه نمایید :
مثال هشت
لیست جدا شده با کاما: با استفاده از کاما (عملکر آن هماندد عملگر OR است) می توانید media query اضافی را به یکی از media query های موجود اضافه نمایید.
مثال :
| /* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */ @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) { div.example { font-size: 50px; padding: 50px; border: 8px solid black; background: yellow; } } |
کلام آخر
در این جلسه به آموزش کار با ویژگی media@ در CSS پرداختیم؛ از قانون media@ استفاده می شود تا استایل های مختلف برای media types/devices اجرا شود.
در جلسه بعدی به آموزش کار با ویژگی min-height خواهیم پرداخت.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
