آموزش دستور media در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش دستور media در CSS با من همراه باشید.

آموزش دستور media در CSS

Free-Learn

دستور media در CSS

با استفاده از دستور / قانون media@ در CSS میتوان به راحتی Media Querie ها ( پرس وجوی رسانه ) را در یک صفحه وب ایجاد و یا تعریف کرد.

حالا یعنی چی این پرس و جوی رسانه ای !؟ بطور کلی و در یه کلام یعنی واکنش گرایی یک صفحه وب، یعنی برای واکنش گرا کردن یک صفحه وب و برای نمایش هرچه بهتر اون صفحه وب در مثلا گوشی های موبایل یا تبلت ها.

یعنی ما به راحتی با استفاده از این دستور میتونیم مشخص کنیم که مثلا فلان باکس در گوشی موبایل فلان دستورات CSS روش اعمال بشه و همون باکس در تبلت ها دیگر دستورات CSS و یا در کامپیوتر / لپ تاپ ها دستورات CSS دیگه ای روش اعمال بشه.

پس یعنی مشخص کردن رسانه ( که میتونه گوشی های موبایل ، تبلت ها ، کامپیوترها و یا صفحاتی که قراره چاپ بشن باشد ) برای اعمال شدن یکسری از دستورات CSS بروی آن رسانه را Media Querie میگوییم.

Free-Learn

مثال از دستور media در CSS

در ادامه میتوانید یک مثال از دستور media@ را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : تعریف کردیم که وقتی اندازه صفحه نمایش کمتر از ۵۰۰ پیکسل شد رنگ صفحه تغییر کند.

امتحان کنید

مثال شماره ۲ : استفاده از ۲ عدد Media@ – اولی برای وقتی اندازه عرض صفحه نمایش بین ۴۰۰ پیکسل تا ۸۰۰ پیکسل بود و دومی برای وقتی اندازه بیشتر از ۸۰۰ پیکسل بود.

و وقتی هم نه بین ۴۰۰ تا ۸۰۰ باشه و نه بیشتر از ۸۰۰ ، دستورات عادی که در body قرار دارند اجرا خواهند شد، یعنی دقیقا وقتی اندازه عرض کمتر از ۴۰۰ پیکسل شد دستوراتی که خارج از این ۲ تا Media@ قرار دارند اعمال خواهند شد.

امتحان کنید

مثال شماره ۳ : میتونیم مشخص کنیم که اگه مثلا صفحه نمایش ( میتونه صفحه نمایش گوشی موبایل یا کامپیوتر باشه ) بصورت عمودی ( Portrait ) یا بصورت افقی ( Landscape ) بود فلان دستورات رو اعمال کن.

یعنی در واقع وقتی اندازه ارتفاع صفحه نمایش بیشتر یا مساوی از اندازه عرضش باشه Portrait اتفاق میوفته و وقتی اندازه عرض بیشتر از اندازه ارتفاعش باشه Landscape اتفاق میوفته.

آموزش دستور media در CSS

امتحان کنید

Free-Learn

جدول مشخصات دستور media در CSS

در جدول زیر میتوانید مشخصات کلی این دستور را در زبان CSS مشاهده نمایید.

مقدار پیش فرض
قابل ارث بری
قابل متحرک سازی
نسخه CSS2
نحوه استفاده در جاوااسکریپت

Free-Learn

پشتیبانی مرورگرها از دستور media در CSS

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از دستور media@ در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
media@ ۴٫۰ ۲٫۰ ۱۰٫۰ ۳٫۱ ۹٫۰

Free-Learn

شکل نوشتاری دستور media در CSS

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این دستور در CSS بصورت زیر می باشد.

Free-Learn

توضیح کلمات کلیدی موجود در شکل نوشتاری

خب یکسری کلمات کلیدی یا عملگر مثه not یا only همونطور که مشاهده مینمایید درون شکل نوشتاری و کلی این دستور وجود دارند، میتوانید در جدول زیر توضیح این کلمات کلیدی را مشاهده نمایید.

استفاده از کلمات کلیدی / عملگرهای زیر اختیاری می باشد، ولی اگر از not یا only استفاده کنید بعدش باید حتما نوع رسانه ( MediaType ) را مشخص نمایید.

کلمه کلیدی توضیح
not برای خنثی کردن یک پرس و جو ( Querie )
only برای پشتیبانی کردن مرورگرهای قدیمی تر از Media Querie ( این کلمه کلیدی روی مرورگرهای مدرن هیچ اثری ندارد و فقط برای مرورگرهای قدیمی تر می باشد )
and برای ترکیب یک یا چندین MediaType یا Media Feature باهمدیگه
or ( یا ) ( مثلا » این ویژگی از رسانه یا فلان ویژگی از رسانه )
MediaType نوع رسانه را مشخص میکند
MediaFeature ویژگی ( امکانات ) رسانه را مشخص میکند

Free-Learn

جدول نوع رسانه یا Media Types

در جدول زیر میتوانید انواع رسانه را جهت استفاده در دستور media@ مشاهده نمایید. مثلا اینکه مشخص کنیم رسانه ما گوشی های موبایل یا کامپیوتر هست یا نه مثلا صفحه پرینت ( یعنی استایل یک صفحه وقتی میخواد بروی کاغذ یا .. چاپ شود )

نوع رسانه توضیح
all پیش فرض – مورد استفاده برای تمامی رسانه یا دستگاها
screen مورد استفاده برای صفحه نمایش های کامپیوتر ، تبلت ، تلفن های هوشمند
speech مورد استفاده برای نرم افزار های صفحه خوان ( مناسب افراد نابینا ، کم بینا ، بیسواد )
print مورد استفاده برای چاپگرها ( یعنی برای استایل صفحه پرینت )

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

نقطه شکست صفحه نمایش چیست؟

بطور کلی به اون اندازه ای از صفحه نمایش که قراره ( و باید ) شکسته بشه ( کمتر یا بیشتر بشه ) میگیم نقطه شکست، مثلا در دستور زیر :

نقطه شکست صفحه میشه اون ;max-width:500px ، یعنی وقتی اندازه صفحه نمایش کمتر از ۵۰۰ پیکسل شد فلان دستورات CSS بروی عناصر اعمال میشه، پس نقطه شکست به اون اندازه ای گفته میشه که باید عناصر به اصطلاح شکسته شوند و استایل جدید بگیرند.

Free-Learn

لیست پیشنهادی نقاط شکست صفحه نمایش

خب ما میتونیم برای خودمون هر نقطه شکستی که دوست داشته باشیم ایجاد کنیم و هیچ مانعی برای اینکار وجود ندارد، مثلا میتونیم بگیم وقتی اندازه صفحه نمایش کمتر از ۶۰۰ پیکسل شد فلان دستورات CSS رو اعمال کن و اگه کمتر از ۵۰۰ پیکسل شد بهمان دستورات رو.

پس بطور کلی مانعی در ایجاد نقطه شکست وجود ندارد، ولی خب یسری نقطه شکست مشخص و یا پیشنهاد شده وجود دارد برای دیگر رسانه ها ( مثه گوشی های موبایل ، تبلت ها و.. ) که بتونیم از آنها استفاده نماییم.

برای دستگاهایی که عرضشون برابر یا کمتر از ۴۸۰ پیکسل هست ( مثه گوشی های موبایل )

 

برای دستگاهایی که عرضشون بین ۴۸۱px و ۷۶۸px هست ( مثه گوشی های موبایل که کمی بزرگتر هستند یا تبلت ها )

 

برای دستگاهایی که عرضشون بین ۷۶۹px و ۱۲۷۹px هست ( مثه لپ تاپ ها ، یا تبلت ها در حالت چرخش افقی )

 

برای دستگاهایی که عرضشون بیشتر از ۱۲۸۰px هست ( مثه لپ تاپ ها یا کامپیوترهای رومیزی )

 

مثال : یک مثال از تمامی نقاط شکست موجود در لیست بالا

امتحان کنید

Free-Learn

نکات و توضیحات دستور media در CSS

وقتی اندازه عرض یک صفحه نمایش کمتر از اندازه ارتفاعش باشه ( مثه گوشی های موبایل )، حالت Landscape اتفاق میوفته ، و وقتی اندازه ارتفاع یک صفحه نمایش بیشتر از اندازه عرضش باشه حالت Portrait اتفاق میوفته.

استفاده از کلمات کلیدی یا همون عملگرهای ( and , not , only ) اختیاری می باشد، ولی اگر از not یا only استفاده کنید بعدش باید حتما نوع رسانه ( MediaType ) را مشخص نمایید.

Free-Learn

مثال های بیشتر

مثال شماره ۱ : مخفی یا آشکار کردن عناصر در رسانه های مختلف ( مثلا مخفی کردن تصویر و تگ h2 در گوشی های موبایل )

امتحان کنید

مثال شماره ۲ : استایل دادن به عناصر در صفحه پرینت ( Print ) – یعنی مثلا میتونیم مشخص میکنیم که فلان عنصر در صفحه پرینت که بخواد پرینت زده بشه رنگش فلان رنگ باشه و…

 

مثال شماره ۳ : ایجاد شرط های مختلف جهت اعمل شدن دستورات CSS بروی عناصر در اندازه های مختلف صفحه نمایش ( مثلا میگیم اگه اندازه صفحه نمایش از فلان تا فلان اندازه بود این عناصرو استایل بده )

در مثال زیر گفتیم » وقتی اندازه صفحه نمایش بین ۶۰۰ و ۹۰۰ پیکسل یا ( OR ) بیشتر از ۱۱۰۰ پیکسل بود ، تصویر رو نمایش نده. اون علامت کاما , یعنی OR ( یا )

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب