آموزش css – درس بیستم – انواع واسطه ها و رسانه ها (Media Types)

طراحی سایت » آموزش CSS » آموزش css – درس بیستم – انواع واسطه ها و رسانه ها (Media Types)
۳ اسفند ۱۳۹۷ چاپ

نقشه راه یادگیری دوره آموزشی CSS

برخی از ویژگیها و مشخصات css تنها برای رسانه ای خاص طراحی و ایجاد شده اند. برای مثال مشخصه ی “voice-family” تنها برای رسانه های شنیداری بوجود آمده است. اما برخی دیگر از این مشخصه ها میتوانند در انواع رسانه ها مورد استفاده قرار بگیرند. برای مثال مشخصه ی “font-size” را میتوانید برای رسانه های تصویری، چاپی و … مورد استفاده قرار دهید.

رسانه ها (Media) در css این امکان را فراهم میکنند که برای وسایل مختلف، قالب متفاوتی داشته باشید و برای آنها به صورت اختصاصی قالب طراحی کنید. برای مثال یک قالب برای نمایش صفحه وب شما در موبایلهای قدیمی، یک قالب برای گوشیهای هوشمند و تبلت و کامپیوتر، قالب اختصاصی برای چاپ و پرینت و …
مزیت استفاده از media در این است که نیاز نیست کل فایل css را بازنویسی کنید. کافی است برای رسانه ی مورد نظر، قسمتهایی را که نیاز دارید ویرایش کنید. مثلا اندازه ی قلم بر روی کاغذ (قالب پرینت ) باید کوچکتر از اندازه ای باشد که در صفحه نمایش رایانه دیده میشود. در این درس، انواع media ها و نحوه استفاده آنها را یاد خواهید گرفت.

انواع واسطه ها و رسانه ها (Media Types)

قانون @media

قانون @media به شما اجازه میدهد تا درون یک فایل css، رسانه های مختلفی را تحت کنترل خود در آورید به جای اینکه برای هر رسانه به طور جداگانه فایل css طراحی کنید. برای درک بهتر به مثال زیر توجه کنید:

@media screen{ /* استایل نمایش در کامپیوتر*/
p.first,
p.second{
font:1.2em/1.7em Tahoma;
padding:30px;
direction:rtl;
}
@media print{ /* استایل مخصوص چاپ */
p.first,
p.second{
font:.9em/1.7em arial,serif;
padding:10px;
direction:rtl;
}
img,
p.second{
display:none;
}
}

برای اینکه بتوانید در عمل این ویژگی را ببینید، مثال آنلاین زیر را مشاهده کنید. یک بار در نمای معمولی (در کامپیوتر) و یک بار هم صفحه را در نمای چاپ یا Print Preview مشاهده کنید تا تفاوت را درک کنید. توضیحات بیشتر درون مثال برای شما آورده شده است.

مشاهده مثال آنلاین

در مثال بالا، هر دو حالت نمایش در کامپیوتر و نمایش پرینت درون یک فایل css قرار گرفته اند ولی اگر بخواهیم فایلهای css جداگانه ای داشته باشیم چطور؟ مثلا بخواهیم یک فایل با نام print.css و یک فایل با نام style.css داشته باشیم.
اگر از دوره مقدماتی به خاطر داشته باشید، برای فراخوانی استایل (css) خارجی از کد زیر استفاده میکنیم:

<link rel="stylesheet" type="text/css" href="style.css" />

در صورتی که برای هر رسانه یک استایل جداگانه داشته باشید، کد بالا را باید به شیوه ی زیر بکار ببرید:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

به این ترتیب باید برای هر نوع رسانه، یک سطر جداگانه قرار دهید. که البته روش نخست، روش بهتری است.

انواع media

رسانه های متفاوتی را میتوانید مورد استفاده قرار دهید ولی در زیر مهمترین و پرکاربردترین آنها را برای شما توضیح داده ایم.

@media all یا media=all

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

@media screen یا media=screen

این رسانه برای وسایلی که دارای صفحه نمایش بزرگ هستند (نظیر کامپیوتر، تبلت و گوشیهای هوشمند) مناسب است. توجه داشته باشید که گوشیهای قدیمی از رسانه ی دیگری استفاده میکنند.
رسانه ی screen دارای حالات مختلفی است و میتوانید بر اساس اندازه ی صفحه نمایش، استایلهای متفاوتی را درنظر بگیرید که در ادامه توضیح خواهیم داد.

@media handheld یا media=handheld

برای گوشیهایی که از سیستم wap استفاده میکنند، گزینه ی handheld مناسب است ولی با توجه به اینکه دارندگان این مدل گوشیها زیاد رغبتی به وبگردی با گوشی ندارند (به دلیل محدودیتهای زیاد وسیله) استفاده از این media زیاد ضروری به نظر نمیرسد.

@media print یا media=print

یکی از پرکاربردترین و ضروریترین media ها، حالت چاپ یا پرینت است. اغلب وبسایتها دارای بخشهای متفاوتی در صفحه هستند، برای مثال منو، تبلیغات، ستون کناری و … ولی هیچکدام از این موارد برای فردی که قصد دارد صفحه را چاپ کند مفید نیستند و به عبارتی باعث هدر رفتن جوهر چاپ و برگه های اضافی میشود. با بکارگیری استایل print میتوانیم موارد اضافی را حذف کنیم تا فقط متن مقاله و عنوان سایت در نسخه ی چاپی نمایش داده شود.
سایر رسانه ها شامل tv (برای تلویزیون و شبه تلویزیون)، projection (برای سیستمهای دانشگاهی و نمایش دهنده ی اسلایدها و ارائه ها)، Braille (برای دستگاه های نمایش دهنده خط بریل برای نابینایان)، embossed (برای چاپ صفحات به گونه ای که برای نابینایان مناسب باشد) و … هستند.

توضیحات بیشتر در خصوص media screen

همانطور که میدانید، انواع گوشیها و تبلت ها دارای صفحات نمایش در اندازه های مختلفی هستند ولی طراحی اختصاصی برای هرکدام کاری سخت و زمانبر است. برای همین منظور میتوانید تعیین کنیم که مثلا اگر اندازه ی صفحه نمایش کوچکتر از 500 پیکسل بود کدام استایل استفاده شود و اگر اندازه صفحه نمایش بالای 800 پیکسل بود کدام استایل. برای این امر از دستور max-width و min-width به صورت زیر استفاده میکنیم:

@media only screen and (min-width:500;) {

}

اگر وسیله دارای سیستم چرخش خودکار باشد، عرض صفحه دو حالت خواهد داشت، در این موارد باید هم min-width و هم max-width را در نظر بگیریم. مثلا برای iPad میتوانیم به شیوه ی زیر عمل کنیم:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
...
{

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

گفتگو پیرامون آموزش css – درس بیستم – انواع واسطه ها و رسانه ها (Media Types)

(منتشر شده: 2 | در انتظار تایید: 0)
ramin

سلام با همین خاصیت قالب واکنشگرا میکنن دیگه یا از روش دیگه ای استفاده میکنن

پاسخ دهید
عصرعلم

در پاسخ به ramin

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

پاسخ دهید

فقط گزینه‌ی وسط را تیک بزنید. »مشاهده قوانین