HTML <style> media ਸ਼ਰੂਆਤ

HTML <style> ਟੈਗ

ਨਿਯਮਾਂ ਅਤੇ ਵਰਤੋਂ

media ਲੱਛਣ ਸਟਾਈਲ ਦੇ ਉਪਕਰਣ / ਮੀਡੀਆ ਦੇ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ ਜਿਸ ਲਈ ਸਟਾਈਲ ਆਪਣਾਉਣਾ ਹੈ

ਇਹ ਲੱਛਣ ਸਟਾਈਲ ਦੇ ਵਰਤੋਂ ਲਈ ਵਿਸ਼ੇਸ਼ ਉਪਕਰਣ (ਜਿਵੇਂ ਕਿ iPhone) ਦੀ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ

ਸੁਝਾਅ:ਇਹ ਲੱਛਣ ਕਈ ਮੁੱਲਾਂ ਸਵੀਕਾਰ ਕਰ ਸਕਦਾ ਹੈ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਪ੍ਰਿੰਟ ਲਈ ਨਿਯਮਤ ਸਟਾਈਲ ਨਿਰਧਾਰਿਤ ਕੀਤੇ ਜਾਂਦੇ ਹਨ:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

ਸਵੈ ਦੀ ਸਿਫ਼ਾਰਸ਼

ਉਦਾਹਰਣ 2

media ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੇ width ਲੱਛਣ ਦੀ ਵਰਤੋਂ ਨਾਲ ਦੋ ਜੋਡਿਆ ਸਟਾਈਲ ਅਲੱਗ ਕੀਤੇ ਜਾਂਦੇ ਹਨ:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

ਸਵੈ ਦੀ ਸਿਫ਼ਾਰਸ਼

ਨੋਟ:ਬਰਾਊਜ਼ਰ ਵਿੰਡੋ ਚੌਡਾਈ 500 ਪਿਕਸਲ ਤੋਂ ਘੱਟ ਹੋਣ ਤੇ ਪਹਿਲੀ ਜੋਡਿਆ ਸਟਾਈਲ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਚੌਡਾਈ 500 ਪਿਕਸਲ ਤੋਂ ਵੱਧ ਹੋਣ ਤੇ ਦੂਜੀ ਜੋਡਿਆ ਸਟਾਈਲ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਗਰੰਥ

<style media="value>

ਸੰਭਵ ਆਪਰੇਟਰ

ਆਪਰੇਟਰ ਵਰਣਨ
and ਨਿਯਮਤ ਅਨੋਡ ਆਪਰੇਟਰ
not ਨਿਯਮਤ ਨਾਨੋ ਆਪਰੇਟਰ
, ਨਿਯਮਤ ਜੋਡਨ ਆਪਰੇਟਰ

ਸਟਾਈਲ ਦੇ ਉਪਯੋਗ ਦੇ ਸ਼ਰਤਾਂ ਨੂੰ ਬਹੁਤ ਵਧੀਆ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।ਪਹਿਲਾਂ ਸਪਸ਼ਟ ਕਰਨਾ ਹੈ ਕਿ ਕਿਸ ਉਪਕਰਣ ਕਿਸਮ ਦੇ ਲਈ ਇਹ ਸਟਾਈਲ ਹੈ।ਹੇਠ ਦੇ ਤਾਲਿਕੇ ਵਿੱਚ ਸਾਰੇ ਨਿਯਮਤ ਮੁੱਲਾਂ ਦੀ ਸੂਚੀ ਦਿੱਤੀ ਗਈ ਹੈ:

ਉਪਕਰਣ

ਉਪਕਰਣ ਵਰਣਨ
all ਮੂਲਤਵੀ
aural ਵੋਕਲ ਸਿੰਥੇਸਿਜ਼ਰ
braille ਬਰੈਲੀ ਫੀਡਬੈਕ ਉਪਕਰਣ
handheld ਹੈੰਡਹੈਲਡ ਉਪਕਰਣ (ਛੋਟੇ ਸਕਰੀਨ, ਸੀਮਿਤ ਬੈਂਡਵਿੱਡਥ)
projection ਪ੍ਰੋਜੈਕਸ਼ਨ
print ਪ੍ਰਿੰਟ ਪ੍ਰਿਵਿਊ ਮੋਡ / ਪ੍ਰਿੰਟ ਪੇਜ
screen ਕੰਪਿਊਟਰ ਸਕਰੀਨ
tty ਸਥਾਈ ਅੰਤਰਾਂਕ ਅਕਸ਼ਰ ਗ੍ਰਿੱਡ ਵਾਲੇ ਟੈਕਸਟ ਟਾਈਪਰ ਅਤੇ ਵਾਕਿਫ਼ੀ ਮੀਡੀਆ
tv ਟੀਵੀ ਜਿਹੜੇ ਉਪਕਰਣ (ਘੱਟ ਰੈਜਲੂਸ਼ਨ, ਸਰਕਲ ਸਮਰੱਥਾ ਘੱਟ ਹੈ)。

ਬਰਾਊਜ਼ਰ ਜਿਹੜਾ ਹੈਡਸੈੱਟ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।ਕੁਝ ਉਪਕਰਣ ਕਿਸਮਾਂ (ਜਿਵੇਂ ਕਿ screen ਅਤੇ print) ਵੱਖ-ਵੱਖ ਬਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਇੱਕ ਜਿਹਾ ਹੀ ਵਿਆਖਿਆ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਪਰ ਹੋਰ ਉਪਕਰਣ (ਜਿਵੇਂ ਕਿ handheld) ਦੀ ਵਿਆਖਿਆ ਕਾਫੀ ਵੱਖਰੀ ਹੋ ਸਕਦੀ ਹੈ।ਇਸ ਲਈ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਉਪਕਰਣ ਲਈ ਬਰਾਊਜ਼ਰ ਦੀ ਵਿਆਖਿਆ ਨੂੰ ਆਪਣੇ ਨਾਲ ਤਕਰੀਬਨ ਕਰਨਾ ਬਹੁਤ ਜ਼ਰੂਰੀ ਹੈ।

ਵਿਸ਼ੇਸ਼ਤਾ

ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਣਨ
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)"
monochrome

ਸਿੰਗਲ ਸ਼ਾਇਨ ਫ੍ਰੇਮ ਬਫਰ ਵਿੱਚ ਹਰ ਪਿਕਸਲ ਦੇ ਬਿਟਸ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

"min-" ਅਤੇ "max-" ਪ੍ਰੀਫਿਕਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ。

ਉਦਾਹਰਨ: media="screen and (monochrome:2)"
resolution

ਟੀਚੇ ਵਾਲੇ ਮੰਚ/ਕਾਗਜ਼ ਦੀ ਪਿਕਸਲ ਡੈਨਸਿਟੀ (dpi ਜਾਂ dpcm) ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

"min-" ਅਤੇ "max-" ਪ੍ਰੀਫਿਕਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ。

ਉਦਾਹਰਨ: media="print and (resolution:300dpi)"
scan

ਟੀਵੀ ਦੇ ਸਕੈਨ ਮੋਡ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

ਸਮਰਥਤ ਮੁੱਲ ਹਨ progressive ਅਤੇ interlace。

ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਕੋਈ ਸ਼ਬਦ ਨਹੀਂ ਹੈ。

ਉਦਾਹਰਨ: media="tv and (scan:interlace)"
grid

规定输出设备是网格还是位图。

网格型设备使用固定的网格显示内容，例如基于字符的终端和单行显示的寻呼机。

ਸਮਰਥਿਤ ਮੁੱਲ 0 ਅਤੇ 1 ਹਨ (1 ਗ੍ਰਿੱਡ ਟੈਕਨੋਲੋਜੀ ਯੂਨਿਟ ਦੇ ਪ੍ਰਤੀਕ ਹੈ)。

ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਕੋਈ ਸ਼ਬਦ ਨਹੀਂ ਹੈ。

ਉਦਾਹਰਣ ਵਜੋਂ: media="handheld and (grid:1)"

width ਜਿਹੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਆਮ ਤੌਰ 'ਤੇ min ਅਤੇ max ਦੇ ਨਾਲ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।ਇਹ ਸ਼ਬਦ ਨਹੀਂ ਵਰਤੇ ਜਾਣ ਤੋਂ ਬਾਅਦ ਸਟਾਇਲ ਦੀ ਵਰਤੋਂ ਦੀ ਸਮਾਨਤਾ ਵਿੱਚ ਕਾਫੀ ਅਨੁਕੂਲਤਾ ਹੁੰਦੀ ਹੈ, ਲੇਕਿਨ ਇਹ ਸ਼ਬਦ ਲਗਾਉਣ ਨਾਲ ਸਥਿਤੀ ਵਿੱਚ ਵਾਧੂ ਲਚਕਦਾਰਤਾ ਹੁੰਦੀ ਹੈ。

ਉੱਪਰੋਕਤ ਸਾਰੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਵਰਣਨ ਕੀਤਾ ਗਿਆ ਹੈ।ਜਦੋਂ ਤੱਕ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਗੱਲ ਨਹੀਂ ਕੀਤੀ ਗਈ, ਉਹ ਮਿਨ- ਅਤੇ ਮੈਕਸ- ਦੁਆਰਾ ਸਮਾਪਤ ਨਹੀਂ ਹੁੰਦੀਆਂ, ਇਹ ਸ਼ੁੱਧ ਮੁੱਲ ਨਹੀਂ ਹਨ ਬਲਕਿ ਸੀਮਾ ਮੁੱਲ ਹਨ。

ਪ੍ਰਿੰਸਪੇਲ ਮੁੱਦੇ ਨਾਲ ਸਬੰਧਤ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵੀ ਬਰਾਉਜ਼ਰ ਵੱਲੋਂ ਸਪਸ਼ਟ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।ਬਰਾਉਜ਼ਰ ਕਿਹੰਦੇ ਹਨ ਕਿ ਕਿਨ੍ਹੀਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ ਅਤੇ ਉਹ ਜਦੋਂ ਮੌਜੂਦ ਹਨ ਅਤੇ ਵਰਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ, ਉਸ ਬਾਰੇ ਵਿੱਚ ਬਹੁਤ ਸਾਰੇ ਵਿਵਾਦ ਹਨ।ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਲਈ ਸਟਾਇਲ ਪ੍ਰਯੋਗ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਸਮੁੱਚੀ ਟੈਸਟ ਕਰੋ ਅਤੇ ਉਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਨਾ ਹੋਣ ਵਾਲੇ ਇਕਾਲੀਨ ਸਟਾਇਲ ਤਿਆਰ ਕਰੋ。

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਚਰਮੋਨੀ ਐਜ਼ਡ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
ਚਰਮੋਨੀ ਐਜ਼ਡ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ

HTML <style> ਟੈਗ