HTML <source> media خاصیت

HTML <source> کا تگ

تعریف اور استعمال

media یہ خاصیت CSS میں عمدتاً دفعات کو قبول کرتی ہے。

توجہ:یہ خاصیت متعدد اعداد کو قبول کر سکتا ہے。

مثال

ایک <picture> عناصر جو دو منبع فایل اور ایک باقی‌مانده تصویر شامل ہیں:

<picture>
  <source media="(min-width:650px)" srcset="flower-1.jpg">
  <source media="(min-width:465px)" srcset="flower-2.jpg">
  <img src="flower-3.jpg" alt="Flowers" style="width:auto;">
</picture>

جرب بنفسك

النحو

<source media="media_query>

عملاق الممكنة

عملاق الوصف
and تعريف عملاق AND.
not تعريف عملاق NOT.
, تعريف عملاق OR.

الجهاز

القيمة الوصف
all المبدأ الافتراضي. يناسب جميع الأجهزة.
aural مكبر للصوت.
braille جهاز ملاحظة بالبرايل.
handheld أجهزة محمولة (شاشة صغيرة، نطاق تردد محدود).
projection جهاز العرض.
print عرض الطباعة المسبق/صفحة الطباعة.
screen شاشة الحاسوب.
tty آلة الطباعة النصية الإلكترونية وأجهزة مشابهة تستخدم شبكة حروف متساوية.
tv أجهزة نوع التلفاز (دقة منخفضة، قدرة على التصفح المحدودة).

القيمة

القيمة الوصف
width

تعريف عرض المنطقة المستهدفة.

می‌توان از پیشوند "min-" و "max-" استفاده کرد.

مثال: media="screen and (min-width:500px)"
height

تعريف طول المنطقة المستهدفة.

می‌توان از پیشوند "min-" و "max-" استفاده کرد.

مثال: media="screen and (max-height:700px)"
device-width

تعريف عرض الشاشة المستهدفة/ورق.

می‌توان از پیشوند "min-" و "max-" استفاده کرد.

مثال: media="screen and (device-width:500px)"
device-height

تعريف طول الشاشة المستهدفة/ورق.

می‌توان از پیشوند "min-" و "max-" استفاده کرد.

مثال: media="screen and (device-height:500px)"
orientation

تعريف اتجاه الشاشة المستهدفة/ورق.

القيم الممكنة: "portrait" أو "landscape"

مثال: media="all and (orientation: landscape)"
aspect-ratio

تعريف نسبة العرض/الطول للمنطقة المستهدفة.

می‌توان از پیشوند "min-" و "max-" استفاده کرد.

مثال: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

تعريف نسبة عرض/طول جهاز العرض/ورق.

می‌توان از پیشوند "min-" و "max-" استفاده کرد.

مثال: media="screen and (aspect-ratio:16/9)"
color

تعريف عدد الأبنية لكل لون في الشاشة المستهدفة.

می‌توان از پیشوند "min-" و "max-" استفاده کرد.

مثال: media="screen and (color:3)"
color-index

تعريف عدد الألوان التي يمكن للشاشة المستهدفة معالجتها.

می‌توان از پیشوند "min-" و "max-" استفاده کرد.

مثال: media="screen and (min-color-index:256)"
تک‌رنگ

تعیین می‌کند هر پیکسل در فریم‌های تک‌رنگ چقدر بیت دارد.

می‌توان از پیشوند "min-" و "max-" استفاده کرد.

مثال: media="screen and (monochrome:2)"
تراکم

تعیین می‌کند تراکم پیکسل نمایشگر/کاغذ هدف (dpi یا dpcm).

می‌توان از پیشوند "min-" و "max-" استفاده کرد.

مثال: media="print and (resolution:300dpi)"
اسکن

تعیین می‌کند که روش اسکن نمایشگر تلویزیون چیست.

ممکنه‌یارها: "progressive" و "interlace".

مثال: media="tv and (scan:interlace)"
شبکه

تعیین می‌کند که دستگاه خروجی شبکه یا بیت‌مپ است.

ممکنه‌یار: "1" برای شبکه، "0" برای دیگر.

مثال: media="handheld and (grid:1)"

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را پشتیبانی می‌کنند.

کروم کنار افراط سافاری آپرا
کروم کنار افراط سافاری آپرا
38.0 9.0 15.0 9.1 25.0

HTML <source> کا تگ