این آموزش در تاریخ ۱۴۰۰/۱۱/۰۹ آپدیت شده است.
آموزش دستور media در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش دستور media در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 دستور media در CSS
- 2 مثال از دستور media در CSS
- 3 جدول مشخصات دستور media در CSS
- 4 پشتیبانی مرورگرها از دستور media در CSS
- 5 شکل نوشتاری دستور media در CSS
- 6 توضیح کلمات کلیدی موجود در شکل نوشتاری
- 7 جدول نوع رسانه یا Media Types
- 8 جدول ویژگی / امکانات دستور media در CSS
- 9 نقطه شکست صفحه نمایش چیست؟
- 10 لیست پیشنهادی نقاط شکست صفحه نمایش
- 11 نکات و توضیحات دستور media در CSS
- 12 مثال های بیشتر
دستور media در CSS
با استفاده از دستور / قانون media@ در CSS میتوان به راحتی Media Query ها ( پرس وجوی رسانه ) را در یک صفحه وب ایجاد و یا تعریف کرد.
حالا یعنی چی این پرس و جوی رسانه ای !؟ بطور کلی و در یه کلام یعنی واکنش گرایی یک صفحه وب، یعنی ایجاد شرط های مختلف در یک صفحه وب، برای نمایش هرچه بهتر اون صفحه وب در مرورگرها و دستگاهای مختلف ( مثه گوشی های موبایل ، تبلت ها و… )
یعنی ما به راحتی با استفاده از این دستور میتونیم مشخص کنیم که مثلا فلان باکس در گوشی موبایل فلان دستورات CSS روش اعمال بشه و همون باکس در تبلت ها دیگر دستورات CSS و یا در کامپیوتر / لپ تاپ ها دستورات CSS دیگه ای روش اعمال بشه.
یا مثلا من میگم فلان دستورات CSS فقط بروی صفحه پرینت [ چاپ ] اعمال شود، دیگه در نهایت اون دستورات CSS فقط موقعی اعمال میشه که اون صفحه بخواد پرینت یا چاپ بشه.
Free-Learn
مثال از دستور media در CSS
در ادامه میتوانید یک مثال از دستور media@ را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : وقتی اندازه عرض صفحه کمتر از ۵۰۰px شد ( یعنی میشه روی گوشی موبایل )، رنگ زمینه و رنگ متن صفحه تغییر پیدا میکنه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> /* در حالت عادی */ body{ background-color:#fff; color:#000; text-align:center; } /* در حالت واکنش گرایی */ /* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media only screen and (max-width: 500px) { body { background-color:black; color:yellow; } } </style> |
مثال شماره ۲ : در حالت عادی ( یعنی روی صفحه نمایش کامپیوتر و لپ تاپ ها ) ۲ تا ستون داریم ، میخوایم کاری کنیم که روی گوشی موبایل این ستون ها بیوفتن زیر هم ( خب همین یعنی واکنش گرایی )
|
1 2 3 4 5 6 7 |
/* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media only screen and (max-width: 500px) { .seton-rast,.seton-chap{ float:none; width:100%; } } |
مثال شماره ۳ : یک گالری تصویر ساده + واکنش گرایی ( تصاویر در حالت عادی بسمت چپ شناور میشن برای اینکه کنار همدیگه قرار بگیرند، ولی وقتی اندازه صفحه کمتر از ۵۰۰ پیکسل میشه همشون زیرهم قرار میگیرن )
|
1 2 3 4 5 6 7 |
/* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media screen and (max-width: 500px) { div.myimg { float: none; width: 100%; } } |
مثال شماره ۴ : مخفی کردن تگ ها با استفاده از دستور Media@ ( در مثال زیر، عکس در کامپیوتر یا لپ تاپ نمایش داده میشه ولی در گوشی های موبایل مخفی میشه و یک پیغام نمایش داده میشه و میگه که شما الان روی گوشی موبایل هستید )
|
1 2 3 4 5 6 7 8 9 |
/* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media screen and (max-width: 500px) { img.MyImage { display: none; } .MyMessage { display: block; } } |
مثال شماره ۵ : تغییر اندازه فونت با استفاده از دستور Media@ ( مثلا در صفحه نمایش های بزرگ مثه لپ تاپ اندازه فونت ۴۰ پیکسل هست ولی خب میخوایم در موبایل ۲۰ پیکسل باشه )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> /* روی صفحه نمایش های بزرگ */ .MyTitle { font-size: 40px; text-align: center; } /* روی گوشی های موبایل */ /* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media only screen and (max-width: 500px) { .MyTitle { font-size: 20px; } } </style> |
مثال شماره ۶ : برای وقتی که صفحه در حالت افقی یا عمودی بود. ( وقتی اندازه ارتفاع صفحه نمایش بیشتر یا مساوی از اندازه عرضش باشه Portrait اتفاق میوفته و وقتی اندازه عرض بیشتر از اندازه ارتفاعش باشه Landscape اتفاق میوفته )
|
1 2 3 4 5 6 7 8 9 |
/* وقتی گوشی در حالت عمودی بود */ @media only screen and (orientation: portrait) { .... } /* وقتی گوشی در حالت افقی بود */ @media only screen and (orientation: landscape) { .... } |
مثال شماره ۷ : استفاده از ۲ عدد Media@ ، اولی برای وقتی اندازه عرض صفحه نمایش بین ۴۰۰ تا ۸۰۰ پیکسل بود و دومی برای وقتی اندازه بیشتر از ۸۰۰ پیکسل بود، و وقتی هم نه بین ۴۰۰ تا ۸۰۰ باشه و نه بیشتر از ۸۰۰ پیکسل، دستورات عادی که در body قرار دارند اجرا خواهند شد.
|
1 2 3 4 5 6 7 8 9 |
/* وقتی عرض صفحه نمایش بین 400 پیکسل و 800 پیکسل باشه */ @media screen and (min-width: 400px) { .... } /* وقتی عرض صفحه نمایش از 800 پیکسل به بالا باشه */ @media screen and (min-width: 800px) { .... } |
Free-Learn
جدول مشخصات دستور media در CSS
در جدول زیر میتوانید مشخصات کلی این دستور را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | – |
|---|---|
| قابل ارث بری | – |
| قابل متحرک سازی | – |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | – |
Free-Learn
پشتیبانی مرورگرها از دستور media در CSS
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از دستور media@ در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| media@ | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری دستور media در CSS
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این دستور در CSS بصورت زیر می باشد.
|
1 2 3 4 5 6 7 |
@media not|only MediaType and (MediaFeature and|or|not MediaFeature) { Your_CSS_Code_In_Here{ ...... } } |
Free-Learn
توضیح کلمات کلیدی موجود در شکل نوشتاری
خب یکسری کلمات کلیدی یا عملگر مثه not یا only همونطور که مشاهده مینمایید درون شکل نوشتاری و کلی این دستور وجود دارند، میتوانید در جدول زیر توضیح این کلمات کلیدی را مشاهده نمایید.
استفاده از کلمات کلیدی / عملگرهای زیر اختیاری می باشد، ولی اگر از not یا only استفاده کنید بعدش باید حتما نوع رسانه ( MediaType ) را مشخص نمایید.
| کلمه کلیدی | توضیح |
|---|---|
| not | برای خنثی کردن یک پرس و جو ( Query ) |
| only | برای پشتیبانی کردن مرورگرهای قدیمی تر از Media Query ( بروی مرورگرهای مدرن هیچ اثری ندارد و فقط برای مرورگرهای قدیمی تر می باشد ) |
| and | برای ترکیب یک یا چندین MediaType یا Media Feature باهمدیگه |
| or | استفاده از کلمه کلیدی OR ( یا ) ( مثلا » فلان یا بهمان ) |
| MediaType | نوع رسانه را مشخص میکند |
| MediaFeature | ویژگی های یک رسانه را مشخص میکند |
Free-Learn
جدول نوع رسانه یا Media Types
در جدول زیر میتوانید انواع رسانه را جهت استفاده در دستور media@ مشاهده نمایید. مثلا اینکه مشخص کنیم رسانه ما گوشی های موبایل یا کامپیوتر هست یا نه مثلا صفحه پرینت ( یعنی استایل یک صفحه وقتی میخواد بروی کاغذ یا .. چاپ شود )
| نوع رسانه | توضیح |
|---|---|
| all | مقدار پیش فرض – مورد استفاده برای تمامی رسانه یا دستگاها |
| screen | مورد استفاده برای صفحه نمایش ها ( کامپیوتر ، لپ تاپ ، تبلت ، موبایل ) |
| speech | مورد استفاده برای نرم افزار های صفحه خوان ( مناسب افراد نابینا ، کم بینا ، بیسواد ) |
| مورد استفاده برای صفحه پرینت یا چاپ |
Free-Learn
جدول ویژگی / امکانات دستور media در CSS
در جدول زیر میتوانید لیستی از ویژگی ها یا امکاناتی ( Media Features ) را که میتوان در دستور media@ اضافه کرد مشاهده نمایید.
| ویژگی | توضیح |
|---|---|
| any-hover | آیا مکانیسم ورودی موجود به کاربر امکان هاور ( Hover ) کردن بروی عناصر را میدهد یا خیر؟ |
| any-pointer | آیا مکانیسم ورودی در دسترس یک وسیله اشاره گر است و اگر چنین است ، چقدر دقیق است؟ |
| aspect-ratio | نسبت اندازه عرض به ارتفاع دستگاه ( مرورگر ) |
| color | تعداد بیت در هر جزء رنگی دستگاه خروجی را مشخص میکند |
| color-gamut | برای تنظیم دامنه رنگی که توسط دستگاه های خروجی پشتیبانی می شود |
| color-index | تعداد رنگهایی که یک دستگاه می تواند نمایش دهد |
| grid | مشخص میکند آیا دستگاه از صفحه شبکه یا بیت مپ استفاده می کند؟ |
| height | اندازه ارتفاع دستگاه ( مرورگر ) را مشخص میکند |
| hover | آیا مکانیسم ورودی اصلی به کاربر امکان هاور ( Hover ) کردن بروی عناصر را میدهد یا خیر؟ |
| inverted-colors | آیا مرورگر یا سیستم عامل رنگ های وارونه را دارد؟ |
| light-level | میزان سطح نور را مشخص می کند |
| max-aspect-ratio | حداکثر نسبت اندازه عرض به ارتفاع دستگاه ( مرورگر ) |
| max-color | حداکثر تعداد بیت در هر جزء رنگی دستگاه خروجی را مشخص میکند |
| max-color-index | حداکثر تعداد رنگهایی که یک دستگاه می تواند نمایش دهد |
| max-height | حداکثر اندازه ارتفاع دستگاه ( مرورگر ) را مشخص میکند |
| max-monochrome | حداکثر تعداد بیت در یک رنگ بر روی دستگاه های تک رنگ |
| max-resolution | حداکثر وضوح دستگاه را با استفاده از dpi یا dpcm تنظیم می کند |
| max-width | حداکثر اندازه عرض دستگاه ( مرورگر ) را مشخص میکند |
| min-aspect-ratio | حداقل نسبت اندازه عرض به ارتفاع دستگاه ( مرورگر ) |
| min-color | حداقل تعداد بیت در هر جزء رنگی دستگاه خروجی را مشخص میکند |
| min-color-index | حداقل تعداد رنگهایی که یک دستگاه می تواند نمایش دهد |
| min-height | حداقل اندازه ارتفاع دستگاه ( مرورگر ) را مشخص میکند |
| min-monochrome | حداقل تعداد بیت در یک رنگ بر روی دستگاه های تک رنگ |
| min-resolution | حداقل وضوح دستگاه را با استفاده از dpi یا dpcm تنظیم می کند |
| min-width | حداقل اندازه عرض دستگاه ( مرورگر ) را مشخص میکند |
| monochrome | برای تنظیم تعداد بیت ها در هر رنگ بر روی دستگاه های تک رنگ |
| orientation | مشخص میکند که دستگاه در حالت افقی ( landscape ) یا عمودی ( portrait ) قرار دارد |
| overflow-block | برای کنترل سَرریز شدن محتوا در عناصر بلاک یا Block |
| overflow-inline | برای کنترل سَرریز شدن محتوا در عناصر درون خطی یا اینلاین |
| pointer | آیا مکانیزم ورودی اصلی یک وسیله اشاره گر است |
| resolution | وضوح دستگاه را با استفاده از dpi یا dpcm تنظیم می کند |
| scan | برای انجام عمل اسکن بروی دستگاههای خروجی |
| scripting | مشخص میکند که آیا اسکریپت ها موجود هستند ( مثه JS ) |
| update | مشخص میکند که یک دستگاه خروجی هرچند وقت یکبار میتواند محتوای صفحه را تغییر دهد؟ |
| width | اندازه عرض دستگاه ( مرورگر ) را مشخص میکند |
Free-Learn
نقطه شکست صفحه نمایش چیست؟
بطور کلی به اون اندازه ای از صفحه نمایش که قراره ( و باید ) شکسته بشه ( کمتر یا بیشتر بشه ) میگیم نقطه شکست، مثلا در دستور زیر :
|
1 |
@media only screen and (max-width: 500px) { ... } |
نقطه شکست صفحه میشه اون ;max-width:500px ، یعنی وقتی اندازه صفحه نمایش کمتر از ۵۰۰ پیکسل شد فلان دستورات CSS بروی عناصر اعمال میشه، پس نقطه شکست به اون اندازه ای گفته میشه که باید عناصر به اصطلاح شکسته شوند و استایل جدید بگیرند.
Free-Learn
لیست پیشنهادی نقاط شکست صفحه نمایش
خب ما میتونیم برای خودمون هر نقطه شکستی که دوست داشته باشیم ایجاد کنیم و هیچ مانعی برای اینکار وجود ندارد، مثلا میتونیم بگیم وقتی اندازه صفحه نمایش کمتر از ۶۰۰ پیکسل شد فلان دستورات CSS رو اعمال کن و اگه کمتر از ۵۰۰ پیکسل شد بهمان دستورات رو.
پس بطور کلی مانعی در ایجاد نقطه شکست وجود ندارد، ولی خب یسری نقطه شکست مشخص و یا پیشنهاد شده وجود دارد برای دیگر رسانه ها ( مثه گوشی های موبایل ، تبلت ها و.. ) که بتونیم از آنها استفاده نماییم.
|
1 2 3 4 5 6 7 8 9 10 11 |
/* برای گوشی های موبایل */ @media only screen and (max-width: 480px) {...} /* برای تبلت ها در حالت عمودی و گوشی های موبایل کمی بزرگتر */ @media only screen and (min-width: 481px) {...} /* برای لپ تاپ ها و تبلت ها بصورت افقی */ @media only screen and (min-width: 769px) {...} /* برای صفحه نمایش های بزرگ مثه کامپیوتر و بالاتر */ @media only screen and (min-width: 1280px) {...} |
Free-Learn
نکات و توضیحات دستور media در CSS
- وقتی اندازه عرض یک صفحه نمایش کمتر از اندازه ارتفاعش باشه ( مثه گوشی های موبایل )، حالت Landscape اتفاق میوفته ، و وقتی اندازه ارتفاع یک صفحه نمایش بیشتر از اندازه عرضش باشه حالت Portrait اتفاق میوفته.
- استفاده از کلمات کلیدی یا همون عملگرهای ( and , not , only ) اختیاری می باشد، ولی اگر از not یا only استفاده کنید بعدش باید حتما نوع رسانه ( Media Type ) را مشخص نمایید.
Free-Learn
مثال های بیشتر
مثال شماره ۱ : استایل دادن به تگ ها در صفحه پرینت ( Print ) ، یعنی مثلا میتونیم مشخص میکنیم که فلان تگ در صفحه پرینت که بخواد پرینت زده بشه رنگش فلان رنگ باشه و…
|
1 2 3 4 5 6 |
@media print { h2 { color: blue; ...... } } |
مثال شماره ۳ : ایجاد شرط های مختلف جهت اعمل شدن دستورات CSS بروی عناصر در اندازه های مختلف صفحه نمایش ( مثلا میگیم اگه اندازه صفحه نمایش از فلان تا فلان اندازه بود این عناصرو استایل بده )
در مثال زیر گفتیم » وقتی اندازه صفحه نمایش بین ۶۰۰ و ۹۰۰ پیکسل یا ( OR ) بیشتر از ۱۱۰۰ پیکسل بود ، تصویر رو نمایش نده. اون علامت کاما , یعنی OR ( یا )
|
1 2 3 4 5 |
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) { .MyImage { display:none; } } |
