رسانه های مختلف در CSS
انواع رسانه ها (Media Types)
Media Typeها به شما اجاره می دهد تا چگونگی نمایش سندها در رسانه های مختلف را مشخص کنید، یک سند می تواند روی کاغذ و یا روی صفحه مونیتور به طور متفاوت نمایش داده شود.
بعضی از خصوصیات CSS ، تنها برای یک رسانه خاص تعریف شده است. برای مثال خصوصیت "voice-family" فقط برای عوامل شفاهی (aural) طراحی شده است. بعضی دیگر از خصوصیات می توانند در انواع رسانه های مختلف استفاده شوند. برای مثال، خصوصیت "font-size" می تواند هم برای صفحه نمایش و هم برای کاغذ پرینت استفاده شود، اما شاید با مقادیر مختلف. برای تنظیم خصوصیت "font-size" یک سند، معمولاً به مقدار بزرگتری روی صفحه نمایش نسبت به کاغد پرینت نیاز است، و همچنین فونت Tahoma روی صفحه نمایش راحت تر خوانده می شود، درحالی که فونت Nazanin برای چاپ روی کاغذ مناسب تر است.
قانون media@
این قانون به شما اجازه می دهد تا styleهای مختلفی را برای رسانه ها متفاوت در یک برگه style تعریف کنید.
در مثال زیر، مرورگر روی صفحه نمایش یک فونت Verdana با اندازه 14px را نمایش می دهد. اما اگر صفحه پرینت گرفته شود، آنرا با فونت Times و با اندازه 10px نمایش خواهد داد. توجه داشته باشید که در هر دو رسانه خصوصیت font-weight با مقدار "bold" تنظیم شده است:
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>
اگر در حال استفاده از مرورگر firefox یا IE5 و نسخه های بالاتر هستید، صفحه بالا را چاپ کنید، خواهید دید که پاراگراف در رسانه های مختلف با فونت و اندازه های متفاوتی نمایش داده می شود.
Media Typeهای مختلف
توجه: نام Media Typeها به حروف بزرگ و کوچک، حساس نیست.
| Media Type | توضیحات |
|---|---|
| all |
برای تمام رسانه های مختلف استفاده می شود |
| aural |
برای رسانه های شفاهی استفاده می شود |
| braille |
برای وسیله های لمسی مخصوص نابینایان استفاده می شود |
| embossed |
برای پرینترهای مخصوص نابینایان استفاده می شود |
| handheld |
برای وسیله های کوچک یا دستی استفاده می شود |
|
برای چاپ استفاده می شود |
|
| projection |
برای پروژه های ارائه ای مانند slideها استفاده می شود |
| screen |
برای صفحه نمایش کامپیوتر استفاده می شود |
| tty |
برای رسانه هایی که از کاراکترهای با عرض ثابت (fixed-pitch) استفاده می کنند کاربرد دارد مانند تله تایپ ها یا دورنگارها و ترمینال ها |
| tv |
برای تلویزیون استفاده می شود |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 21036
دیدگاه‌ها
سلام ممنون بابت این همه زحمت بی چشم داشت.
سلام
ایا قانون Media در تمام مرورگر ها به خوبی اجرا می شود ؟
ایا handheld : Media Type برای تلفن های همراه استفاده می شود ؟
با سلام
Media در CSS3 هست و هر مرورگری که CSS3 رو پشتیبانی کنه، مشکلی با media نداره.
اکثر مرورگرهای امروزی که ساپورت میکنن!
ایا handheld : Media Type برای تلفن های همراه استفاده می شود ؟
راستش نمی‌دونم!!!
تا حالا به این عبارت برخورد نکردم. تو اینترنت هم سرچ کردم، چیزی پیدا نکردم.
راهی نیست که وب سایت را طوری تنظیم کنیم که یک صفحه را به تلفن همراه نشان دهد
و یک صفحه دیگر را به رایانه ؟
توسط کلاسهای بوت استرپ می‌توان محتوا رو طوری تنظیم کرد که در محیط های نمایشی با رزولوشن متفاوت، مطالب رو بر اساس رزولوشن اون محیط نمایش بده، به طوری که محتوا در هر محیط چه مانیتور و چه صفحه موبایل مرتب و منظم نمایش داده بشه.
حتی میشه توسط کلاسهایی که در بوت استرپ تعریف شده یا حتی تعریف شده توسط ما، متن یا مطلبی در مانیتور نمایش داده بشه، ولی در موبایل نمایش داده نشه. و ...
اگه منظورتون از سؤال قبلی این هست، باید بگم که امکانش هست. ولی نیاز به طراحی و سناریو دقیق داره.
سلام به مدیر دقیق و عالی و فوق العاده
واقعا جا داده از زحمات شما تشکر کنم فوق العاده هستید آفرین
تقریبا من کل سایت شما رو خط به خط خوندم
فقط مشکلات کوچکی که وجود دارند برای مثال در جمله هایی از جمع ((ها)) استفاده می کنید ولی آخر جمله مفرد میشود
منظورم این است که اگه این مشکلات جزیی نباشید خواناایی جملات سایت فوق العاده بالا می رود
برای مثال این جمله را ببینید
(((Media Typeها به شما اجاره می دهد)) جمله با جمع شروع میشود ولی آخرش نوشتید می دهد این غلط جمله ای ها خیلی در سایت موجود البته خیلی مهم نیست فقظ گفتم که شما بدانید
ممنون از سایت عالی و بی نظیرتون
با سلام و تشکر از حسن توجه شما
از اینکه تا این حد دقیق مطالب سایت بیاموز را دنبال می کنید بسیار خرسندیم.
به خاطر اشتباهاتی که سهواً صورت گرفته عذر خواهی می کنیم. و تمام تلاشمان را برای رفع این موارد بکار خواهیم گرفت.
من تو یه سایت دیدم از این استفاده شده
s6.picofile.com/file/8209514350/1.png
میخواستم ببینم میتونید راهنمایی کنید برای چیه؟
با سلام
می توانید به "آموزش CSS-شناور کردن عنصر " مراجعه کنید. برای این کار از لینک زیر استفاده نمایید.
www.beyamooz.com/css/87-advance/293-%D8%AE%D8%A7%D8%B5%DB%8C%D8%AA-float-%D8%AF%D8%B1-css
خیلی زحمت می کشید واقعا دست شما درد نکنه همه چی عالی هست