HTML <source> media ਵਿਸ਼ੇਸ਼ਤਾ

HTML <source> ਟੈਗ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

media ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਸਾਧਾਰਨ ਸਾਈਟ ਵਿੱਚ ਸੀਐੱਸਐੱਸ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਕੋਈ ਵੀ ਮੀਡੀਆ ਕਿਊਰੀ ਸਵੀਕਾਰ ਕਰਦੀ ਹੈ。

ਧਿਆਨ:ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਕਈ ਮੁੱਲਾਂ ਸਵੀਕਾਰ ਕਰ ਸਕਦੀ ਹੈ。

ਮਾਡਲ

ਇੱਕ ਦੋ ਸੋਰਸ ਫਾਈਲਾਂ ਅਤੇ ਇੱਕ ਬੈਕਅਪ ਚਿੱਤਰ ਵਾਲਾ <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

تعریف نسبت device-width/device-height نمایشگر/کاغذ هدف.

"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)"
ਸਕੈਨ

tv ਸਕ੍ਰੀਨ ਦੀ ਸਕੈਨ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ

ਸੰਭਵ ਮੁੱਲ: "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> ਟੈਗ