CSS @media ਕਿਊਰੀ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

@media ਕਿਊਰੀ ਮੀਡੀਆ ਕਿਊਰੀ ਵਿੱਚ ਵਰਤੀ ਜਾਂਦੀ ਹੈ ਤਾਕਿ ਵੱਖ-ਵੱਖ ਮੀਡੀਆ ਟਾਈਪਾਂ/ਉਪਕਰਣਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਸਟਾਈਲਾਂ ਲਾਗੂ ਕੀਤੀਆਂ ਜਾਣ।

ਮੀਡੀਆ ਕਿਊਰੀ ਕਈ ਚੀਜਾਂ ਦੀ ਜਾਂਚ ਕਰ ਸਕਦੀ ਹੈ ਜਿਵੇਂ ਕਿ:

  • ਵਿਊਪਾਰਟ ਦੀ ਚੌਦਾਈ ਅਤੇ ਉਚਾਈ
  • ਉਪਕਰਣ ਦੀ ਚੌਦਾਈ ਅਤੇ ਉਚਾਈ
  • ਦਿਸ਼ਾ (ਸਮਾਰਟਫੋਨ ਜਾਂ ਪੈਡ ਕੰਪਿਊਟਰ ਕਿਸ ਸਥਿਤੀ ਵਿੱਚ ਹੈ? ਪੱਧਰੀ ਜਾਂ ਪੱਥਰੀ ਮੋਡ?)
  • ਰੈਸਲੂਸ਼ਨ

ਮੀਡੀਆ ਕਿਊਰੀ ਵਰਤਣਾ ਇੱਕ ਪ੍ਰਚਲਿਤ ਤਕਨੀਕ ਹੈ ਜੋ ਟਾਇਪੀਡੇਕਟ ਮਕੀਨ, ਲੈਪਟਾਪ, ਪੈਡ ਜਾਂ ਮੋਬਾਈਲ ਫੋਨ ਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਤਿਆਰ ਸਟਾਈਲ ਸ਼ੇਅਰ ਦੇਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ (ਰੈਸਪੋਨਸਿਵ ਵੈੱਬ ਡਿਜਾਈਨ)。

ਤੁਸੀਂ ਮੀਡੀਆ ਕਿਊਰੀ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਕਿਉਂਕਿ ਕੁਝ ਸਟਾਈਲਾਂ ਕੇਵਲ ਪ੍ਰਿੰਟ ਦੇ ਦਸਤਾਵੇਜ਼ਾਂ ਜਾਂ ਸਕਰੀਨ ਰੀਡਰ (ਮੀਡੀਆਟਾਈਪ: ਪ੍ਰਿੰਟ, ਸਕਰੀਨ ਜਾਂ ਸਪੀਚ) ਲਈ ਪ੍ਰਤੀਭਾਵੀ ਹੋਣ।

ਮੀਡੀਆ ਤਰੀਕਿਆਂ ਤੋਂ ਇਲਾਵਾ, ਮੀਡੀਆ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵੀ ਹਨ। ਮੀਡੀਆ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਮੀਡੀਆ ਕਿਵੇਂ ਦੇ ਵਿਸ਼ੇਸ਼ ਵੇਰਵੇ ਦੇ ਲਈ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ, ਜਿਵੇਂ ਉਦਾਹਰਣ ਵਜੋਂ, ਤੁਸੀਂ ਸਿਰਫ਼ ਵਿਸ਼ੇਸ਼ ਚੌਡਾਈ ਵਾਲੇ ਸਕਰੀਨਾਂ 'ਤੇ ਸਟਾਈਲ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ।

ਇਹ ਵੀ ਦੇਖੋ:

CSS ਸਿੱਖਣਾCSS ਮੀਡੀਆ ਕਿਊਰੀ

CSS ਸਿੱਖਣਾCSS ਮੀਡੀਆ ਕਿਵੇਂ ਉਦਾਹਰਣ

RWD ਸਿੱਖਣਾਮੀਡੀਆ ਕਿਵੇਂ ਰੈਸਪੋਨਸਿਵ ਵੈੱਬ ਡਿਜਾਇਨ ਲਾਗੂ ਕਰਨਾ ਹੈ

JavaScript ਸੂਚਨਾ-ਮੁੱਖੀ:window.matchMedia() ਮੱਥਦਾ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਜੇਕਰ ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ ਦੀ ਚੌਡਾਈ 600px ਜਾਂ ਘੱਟ ਹੈ ਤਾਂ <body> ਏਜੈਂਟ ਦੀ ਪਿੱਛਲੀ ਰੰਗ ਨੂੰ ਹਲਕੇ ਨੀਲੇ ਰੰਗ ਵਿੱਚ ਬਦਲ ਦਿਓ:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਇੱਥੇ ਹੋਰ TIY ਉਦਾਹਰਣ ਮਿਲ ਸਕਦੇ ਹਨ。

CSS ਗਰੰਥ

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not, only ਅਤੇ and ਕੀਤੇ ਵਾਕ ਦਾ ਮਕਸਦ:

not: not ਕੀਤਾ ਵਾਕ ਪੂਰੇ ਮੀਡੀਆ ਕਿਵੇਂ ਨਹੀਂ ਕਿਵੇਂ ਨਿਰਦੇਸ਼ਿਤ ਕਰਦਾ ਹੈ。

only: only ਕੀਤਾ ਵਾਕ ਪੁਰਾਣੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਨਿਰਦੇਸ਼ਿਤ ਸਟਾਈਲਸ਼ੀਟ ਲਾਗੂ ਨਹੀਂ ਕਰਦਾ, ਜੋ ਮੀਡੀਆ ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਮੀਡੀਆ ਕਿਵੇਂ ਨਹੀਂ ਸਮਰਥਨ ਕਰਦੇ ਹਨ। ਇਹ ਆਧੁਨਿਕ ਬਰਾਉਜ਼ਰਾਂ 'ਤੇ ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ ਪਾਉਂਦਾ。

and: and ਕੀਤਾ ਵਾਕ ਮੀਡੀਆ ਵਿਸ਼ੇਸ਼ਤਾ ਅਤੇ ਮੀਡੀਆ ਤਰੀਕਾ ਜਾਂ ਹੋਰ ਮੀਡੀਆ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਮਿਲਾ ਦਿੰਦਾ ਹੈ。

ਇਹ ਸਾਰੇ ਵਿਕਲਪੀ ਹਨ। ਲੇਕਿਨ, ਜੇਕਰ not ਜਾਂ only ਵਰਤਿਆ ਗਿਆ ਤਾਂ ਮੀਡੀਆ ਤਰੀਕਾ ਨੂੰ ਵੀ ਨਿਰਦੇਸ਼ਿਤ ਕਰਨਾ ਹੁੰਦਾ ਹੈ。

ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਮੀਡੀਆ ਲਈ ਵੱਖ-ਵੱਖ ਸਟਾਈਲਸ਼ੀਟ ਵਰਤ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਇਸ ਤਰ੍ਹਾਂ:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

ਮੀਡੀਆ ਤਰੀਕਾ

ਮੁੱਲ ਵਰਣਨ
all ਮੂਲਤਵੀ ਹੈ। ਸਾਰੇ ਮੀਡੀਆ ਤਰੀਕਿਆਂ ਦੇ ਉਪਕਰਣਾਂ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ。
print ਪ੍ਰਿੰਟਰ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ。
screen ਕੰਪਿਊਟਰ ਸਕਰੀਨ, ਟੇਬਲੇਟ, ਸਮਾਰਟਫੋਨ ਆਦਿ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ。
speech ਪੰਨੇ ਪੜ੍ਹਨ ਵਾਲੇ ਸਕਰੀਨ ਰੀਡਰ ਲਈ ਵਰਤੇ ਜਾਂਦਾ ਹੈ。

ਮੀਡੀਆ ਵਿਸ਼ੇਸ਼ਤਾ

ਮੁੱਲ ਵਰਣਨ
any-hover

ਕੀ ਕੋਈ ਉਪਲੱਬਧ ਇੰਪੂਟ ਮੈਕਾਨਿਜ਼ਮ ਹੈ ਜੋ ਯੂਜ਼ਰ ਨੂੰ (ਮਾਊਸ ਆਦਿ) ਏਜੈਂਟ ਉੱਤੇ ਲਟਕਾਉਣ ਦੀ ਆਗਿਆ ਦੇਵੇ?

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
any-pointer

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

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
aspect-ratio 视口（viewport）的宽高比。
color

输出设备每个像素的比特值，常见的有 8、16、32 位。

如果设备不支持输出彩色，则该值为 0。
color-gamut

用户代理和输出设备大致程度上支持的色域。

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
color-index

ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਦੇ ਕੋਲਰ ਲੁੱਕਅੱਪ ਟੇਬਲ (color lookup table) ਵਿੱਚ ਇੰਟਰੀਜ਼ ਦੀ ਸੰਖਿਆ

ਜੇਕਰ ਉਪਕਰਣ ਕੋਲਰ ਲੁੱਕਅੱਪ ਟੇਬਲ ਨਹੀਂ ਵਰਤਦਾ ਤਾਂ ਇਹ ਮੁੱਲ 0 ਹੋਵੇਗਾ
device-aspect-ratio

ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਦੇ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਦਰਮਿਆਨ ਦਾ ਪ੍ਰਪੋਰਸ਼ਨ

ਮੀਡੀਆ ਕਿਊਅਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਤਿਆਗ ਦਿੱਤਾ ਗਿਆ ਹੈ
device-height

ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਦੇ ਰੈਂਡਰਿੰਗ ਸਫ਼ਤਾਰੀ (ਜਿਵੇਂ ਕਿ ਸਕਰੀਨ) ਦੀ ਉਚਾਈ

ਮੀਡੀਆ ਕਿਊਅਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਤਿਆਗ ਦਿੱਤਾ ਗਿਆ ਹੈ
device-width

ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਦੇ ਰੈਂਡਰਿੰਗ ਸਫ਼ਤਾਰੀ (ਜਿਵੇਂ ਕਿ ਸਕਰੀਨ) ਦੀ ਚੌਡਾਈ

ਮੀਡੀਆ ਕਿਊਅਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਤਿਆਗ ਦਿੱਤਾ ਗਿਆ ਹੈ
display-mode

ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਮੋਡ, ਜਿਵੇਂ ਕਿ web app ਦੇ ਮੈਨੀਫੈਸਟ ਵਿੱਚ ਦਿਸਪਲੇ ਮੈਂਬਰ ਵੱਲੋਂ ਨਿਰਧਾਰਿਤ

ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਮੈਨੀਫੈਸਟ ਸਪੈਸਿਫਿਕੇਸ਼ਨ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਹੈ
forced-colors

ਕੀ ਯੂਜ਼ਰ ਏਜੈਂਟ ਪੈਲੇਟ ਨੂੰ ਸੀਮਤ ਕਰ ਰਿਹਾ ਹੈ?

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 5 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
grid ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਨੇ ਗ੍ਰਿੱਡ ਸਕ੍ਰੀਨ ਜਾਂ ਪੁਆਇੰਟ ਮੈਟ੍ਰਿਕ ਸਕ੍ਰੀਨ ਦਾ ਉਪਯੋਗ ਕਰ ਰਿਹਾ ਹੈ?
height ਵਿਜੂਅਲ ਪੋਰਟਫੋਲੀਓ (viewport) ਦੀ ਉਚਾਈ
hover

ਮੁੱਖ ਇੰਪੁਟ ਮਕੈਨਿਜ਼ਮ ਨੇ ਉਪਯੋਗਕਰਤਾ ਨੂੰ ਅਲੌਕਨ ਉੱਤੇ ਮਾਊਸ ਰੱਖਣ ਦੀ ਇਜਾਜਤ ਦਿੰਦਾ ਹੈ ਕਿ ਨਹੀਂ?

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
inverted-colors

ਬਰਾਊਜ਼ਰ ਜਾਂ ਨੀਚੇ ਲੈਵਲ ਓਪ੍ਰੇਟਿੰਗ ਸਿਸਟਮ ਰੰਗ ਨੂੰ ਉਲਟ ਕਰ ਰਿਹਾ ਹੈ ਕਿ ਨਹੀਂ?

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 5 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
light-level

ਮੌਜੂਦਾ ਪ੍ਰਕਾਸ਼ ਪੱਧਰ

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 5 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
max-aspect-ratio ਪ੍ਰਦਰਸ਼ਨ ਖੇਤਰ ਦੇ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਦਰਮਿਆਨ ਨਾਲ ਸਭ ਤੋਂ ਵੱਧ ਪ੍ਰਪੋਰਸ਼ਨ
max-color ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਦੇ ਹਰ ਰੰਗ ਤੋਂ ਪ੍ਰਤੀ ਨਾਲ ਸਭ ਤੋਂ ਵੱਧ ਦਿਸ਼ਾ ਨੰਬਰ
max-color-index ਉਪਕਰਣ ਵੱਲੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੇ ਜਾ ਸਕਣ ਵਾਲੇ ਨਾਲ ਸਭ ਤੋਂ ਵੱਧ ਰੰਗਾਂ ਦਾ ਸੰਖਿਆ
max-height ਪ੍ਰਦਰਸ਼ਨ ਖੇਤਰ ਦੀ ਨਾਲ ਸਭ ਤੋਂ ਵੱਧ ਉਚਾਈ ਜਿਵੇਂ ਕਿ ਬਰਾਊਜ਼ਰ ਵਿੰਡੋ
max-monochrome ਸਿੰਗਲ ਰੰਗ (ਗ੍ਰੇਸ਼ਨ) ਉਪਕਰਣ 'ਰੰਗ' ਦੇ ਨਾਲ ਸਭ ਤੋਂ ਵੱਧ ਦਿਸ਼ਾ ਨੰਬਰ
max-resolution ਉਪਕਰਣ ਦਾ ਵੱਧਤਮ ਰੈਜੂਲੇਸ਼ਨ ਜੋ ਕਿ dpi ਜਾਂ dpcm ਵਿੱਚ ਮਾਪਿਆ ਜਾਂਦਾ ਹੈ
max-width ਪ੍ਰਦਰਸ਼ਨ ਖੇਤਰ ਦੀ ਨਾਲ ਸਭ ਤੋਂ ਵੱਧ ਚੌਡਾਈ ਜਿਵੇਂ ਕਿ ਬਰਾਊਜ਼ਰ ਵਿੰਡੋ
min-aspect-ratio ਪ੍ਰਦਰਸ਼ਨ ਖੇਤਰ ਦੇ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਦਰਮਿਆਨ ਨਾਲ ਸਭ ਤੋਂ ਘੱਟ ਪ੍ਰਪੋਰਸ਼ਨ
min-color ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਦੇ ਹਰ ਰੰਗ ਤੋਂ ਪ੍ਰਤੀ ਨਾਲ ਸਭ ਤੋਂ ਘੱਟ ਦਿਸ਼ਾ ਨੰਬਰ
min-color-index ਉਪਕਰਣ ਵੱਲੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੇ ਜਾ ਸਕਣ ਵਾਲੇ ਨਾਲ ਸਭ ਤੋਂ ਘੱਟ ਰੰਗਾਂ ਦਾ ਸੰਖਿਆ
min-height ਪ੍ਰਦਰਸ਼ਨ ਖੇਤਰ ਦੀ ਨਾਲ ਸਭ ਤੋਂ ਘੱਟ ਉਚਾਈ ਜਿਵੇਂ ਕਿ ਬਰਾਊਜ਼ਰ ਵਿੰਡੋ
min-monochrome ਸਿੰਗਲ ਰੰਗ (ਗ੍ਰੇਸ਼ਨ) ਉਪਕਰਣ 'ਰੰਗ' ਦੇ ਨਾਲ ਸਭ ਤੋਂ ਘੱਟ ਦਿਸ਼ਾ ਨੰਬਰ
min-resolution dpi
ਉਪਕਰਣ ਦੀ ਸਭ ਤੋਂ ਘੱਟ ਰੈਜਲੂਸ਼ਨ, dpi ਜਾਂ dpcm ਵਿੱਚ ਵਰਤੋਂ min-width
ਵਿਸ਼ਾਲ ਦੀ ਸਭ ਤੋਂ ਘੱਟ ਚੌਡਾਈ, ਉਦਾਹਰਣ ਵਜੋਂ ਬਰਾਅਜ਼ਰ ਵਿੰਡੋ

monochrome

ਜੇਕਰ ਉਪਕਰਣ ਸਿਰਫ਼ ਸਿਹਤਮੰਦ ਸਕ੍ਰੀਨ ਨਹੀਂ ਹੈ, ਤਾਂ ਇਹ ਮੁੱਲ 0 ਹੋਵੇਗਾ
orientation ਵਿਸ਼ਾਲ ਦੀ ਚੌਡਾਈ ਦੀ ਪਰਿਵਰਤਨ ਦਿਸ਼ਾ (ਖੜ੍ਹਾ ਜਾਂ ਪੱਕਾ ਮੋਡ)
overflow-block

ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਨੇ ਬਲਕ ਅਕਸ਼ ਦੇ ਚੌਡਾਈ ਵਿੱਚ ਵਿਸ਼ਾਲ ਦਾ ਸਮਾਪਤ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਿ ਹੈ?

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
overflow-inline

ਅੰਦਰੂਨੀ ਇਨਲਾਈਨ ਅਕਸ਼ ਦੇ ਚੌਡਾਈ ਵਿੱਚ ਵਿਸ਼ਾਲ ਦਾ ਸਮਾਪਤ ਕਰਨ ਦੀ ਗਤੀ ਸਕਰੋਲ ਕਰਨ ਦੀ ਆਗਿਆ ਹੈ ਕਿ ਨਹੀਂ?

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
pointer

ਮੁੱਖ ਇਨਪੁਟ ਮੈਕਨੀਜ਼ ਇੱਕ ਨਿੰਟਰ ਉਪਕਰਣ ਹੈ ਕਿ ਨਹੀਂ? ਜਦੋਂ ਹੈ, ਤਾਂ ਉਸ ਦੀ ਪ੍ਰਕਾਸ਼ਤਾ ਕਿ ਹੈ?

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
prefers-color-scheme

ਉਪਭੋਗਤਾ ਨੇ ਉਚਾ ਜਾਂ ਘੱਟ ਰੰਗ ਸਕੀਮ ਦੀ ਪਸੰਦ ਕੀਤੀ ਹੈ ਕਿ ਨਹੀਂ?

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 5 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
prefers-contrast

ਉਪਭੋਗਤਾ ਨੇ ਸਿਸਟਮ ਵਿੱਚ ਨੇਕਰ ਜਾਂ ਨੀਲੇ ਰੰਗਾਂ ਵਿੱਚ ਵਿਰੋਧਿਤਾ ਨੂੰ ਵਧਾਉਣ ਜਾਂ ਘਟਾਉਣ ਦੀ ਮੰਗ ਕੀਤੀ ਹੈ ਕਿ ਨਹੀਂ?

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 5 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
prefers-reduced-motion

ਉਪਭੋਗਤਾ ਨੇ ਪੰਨੇ 'ਤੇ ਘੱਟ ਗਤੀਸ਼ੀਲ ਪ੍ਰਭਾਵ ਦੀ ਪਸੰਦ ਕੀਤੀ ਹੈ ਕਿ ਨਹੀਂ?

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 5 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
prefers-reduced-transparency

ਉਪਭੋਗਤਾ ਨੇ ਹਲਕੇ ਪਾਰਦਰਸ਼ਤਾ ਦੀ ਪਸੰਦ ਕੀਤੀ ਹੈ ਕਿ ਨਹੀਂ?

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 5 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
resolution ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਦੀ ਰੈਜਲੂਸ਼ਨ, dpi ਜਾਂ dpcm ਵਿੱਚ ਵਰਤੋਂ
scan ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਦੀ ਸਕੈਨਿੰਗ ਪ੍ਰਕਿਰਿਆ (ਟੀਵੀ ਆਦਿ ਲਈ)
scripting

ਸਕਰਿਪਟਿੰਗ (ਉਦਾਹਰਣ ਵਜੋਂ JavaScript) ਦੀ ਉਪਲੱਬਧਤਾ ਨੂੰ ਪਤਾ ਲਗਾਓ

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 5 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
update

ਆਉਟਪੁੱਟ ਉਪਕਰਣ ਦੇ ਤੇਜ਼ੀ ਨਾਲ ਸਮਾਪਤ ਕਰਨ ਦੀ ਫਰਕਤੀ ਅਪਡੇਟ ਦੀ ਪ੍ਰਮਾਣਿਕਤਾ

ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਲੈਵਲ 4 ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
width ਵਿਸ਼ਾਲ ਦੀ ਚੌਡਾਈ

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 2

ਜਦੋਂ ਬਰਾਅਜ਼ਰ ਦੀ ਚੌਡਾਈ 600px ਜਾਂ ਘੱਟ ਹੈ ਤਾਂ ਏਲੀਮੈਂਟ ਨੂੰ ਛੁਪਾਓ:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 3

ਜੇਕਰ ਵਿਸ਼ਾਲ ਦਾ ਚੌਡਾਈ 800 ਪਿਕਸਲ ਜਾਂ ਅਧਿਕ ਹੈ, ਤਾਂ ਪ੍ਰਿੰਟਰੀ ਵਰਤ ਕੇ ਪਿੱਨਾਂ ਦੀ ਰੰਗ ਨੂੰ ਫੁੱਲਾਂ ਦੀ ਰੰਗ ਵਿੱਚ ਸੈਟ ਕਰੋ; ਜੇਕਰ ਵਿਸ਼ਾਲ ਦਾ ਚੌਡਾਈ 400 ਤੋਂ 799 ਪਿਕਸਲ ਵਿੱਚ ਹੈ, ਤਾਂ ਪ੍ਰਿੰਟਰੀ ਵਰਤ ਕੇ ਪਿੱਨਾਂ ਦੀ ਰੰਗ ਨੂੰ ਹਲਕੇ ਹਰੇ ਵਿੱਚ ਸੈਟ ਕਰੋ। ਜੇਕਰ ਵਿਸ਼ਾਲ ਦੀ ਚੌਡਾਈ 400 ਪਿਕਸਲ ਤੋਂ ਘੱਟ ਹੈ, ਤਾਂ ਪਿੱਨਾਂ ਦੀ ਰੰਗ ਹਲਕੇ ਨੀਲੇ ਵਿੱਚ ਹੋਵੇਗੀ:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 4

ਇੱਕ ਰੈਸਪੋਨਸਿਵ ਨੇਵੀਗੇਸ਼ਨ ਮੇਨੂ ਬਣਾਓ (ਵੱਡੇ ਸਕਰੀਨ 'ਤੇ ਹੰਗਾਮੀ ਰੂਪ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ, ਛੋਟੇ ਸਕਰੀਨ 'ਤੇ ਸ਼ਿਸ਼ਟਾਂਗਾ ਰੂਪ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 5

ਮੀਡੀਆ ਕਿਊਰੀ ਦੀ ਮਦਦ ਨਾਲ ਰੈਸਪੋਨਸਿਵ ਸਤੰਭ ਸਟਾਈਲ ਬਣਾਓ:

/* 992px ਜਾਂ ਘੱਟ ਚੌਡਾਈ ਵਾਲੇ ਸਕਰੀਨਾਂ 'ਤੇ ਚਾਰ ਸਤੰਭ ਨੂੰ ਦੋ ਸਤੰਭ ਵਿੱਚ ਬਦਲੋ */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 600 ਪਿਕਸਲ ਤੋਂ ਘੱਟ ਚੌਡਾਈ ਵਾਲੇ ਸਕਰੀਨਾਂ 'ਤੇ ਹਰੇਕ ਸਤੰਭ ਨੂੰ ਪਿਛਲੇ ਨਾਲ ਜੋੜੋ, ਨਹੀਂ ਕਿ ਸਾਰੇ ਇੱਕ ਸਾਥ */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 6

ਮੀਡੀਆ ਕਿਊਰੀ ਦੀ ਮਦਦ ਨਾਲ ਰੈਸਪੋਨਸਿਵ ਵੈੱਬਸਾਈਟ ਬਣਾਓ:

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 7

ਮੀਡੀਆ ਕਿਊਰੀ ਨੂੰ ਵਰਤਣ ਨਾਲ ਪੇਜ ਦੀ ਬਾਹਰੀ ਸਰਕਾਰ ਨੂੰ ਬਦਲਣ ਵਿੱਚ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਤੁਸੀਂ ਇੱਕ ਜੋੜੀ ਵਿੱਚ ਲਿਖੇ ਹੋਏ ਸੀਐੱਸਐੱਸ ਪ੍ਰੋਪਰਟੀਜ਼ ਲਿਖ ਸਕਦੇ ਹੋ ਜੋ ਕੇਵਲ ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ ਦੀ ਚੌਡਾਈ ਉੱਚਾਈ ਤੋਂ ਵੱਧ ਹੋਣ ਤੱਕ ਲਾਗੂ ਹੁੰਦੇ ਹਨ (ਯਾਨੀ 'ਲੈਂਡਸਕੇਪ' ਦਿਸ਼ਾ):

ਜਦੋਂ ਨਿਰਦੇਸ਼ਾਂ ਦਾ ਅਸਰ ਪੱਟੇ ਹੋਵੇ - ਸਫ਼ਤ ਗੁਲਾਬੀ ਪੱਟੇ ਰੰਗ ਦਾ ਪੱਟੇ ਵਰਤੋਂ ਕਰੋ:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 8

ਮੀਡੀਆ ਕਿਊਰੀ ਦੀ ਮਦਦ ਨਾਲ ਲਿਖਦੇ ਹੋਏ ਲਾਗੂ ਕਰੋ ਕਿ ਸਕਰੀਨ ਉੱਤੇ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਲੀਨਟ ਹਰੀ ਹੋਵੇ ਅਤੇ ਪ੍ਰਿਟ ਕਰਨ ਲਈ ਕਾਲੀ ਹੋਵੇ:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 9

ਕੋਮਾ ਵੱਲੋਂ ਵੰਡੀ ਸੂਚੀ: ਕੋਮਾ ਦੇ ਮਾਧਿਅਮ ਨਾਲ ਮੌਜੂਦਾ ਮੀਡੀਆ ਕਿਊਰੀ ਵਿੱਚ ਹੋਰ ਮੀਡੀਆ ਕਿਊਰੀ ਜੋੜੋ (ਇਹ OR ਆਪਰੇਟਰ ਦੇ ਵਰਗਾ ਹੁੰਦਾ ਹੈ):

/* ਜਦੋਂ ਚੌਡਾਈ 600px ਤੋਂ 900px ਦਰਮਿਆਨ ਹੋਵੇ ਜਾਂ 1100px ਤੋਂ ਵੱਧ ਹੋਵੇ - <div> ਦੇ ਆਉਟਲੁਕ ਨੂੰ ਬਦਲੋ */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

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

ਸਪਸ਼ਟ ਨੋਟਸ ਵਿੱਚ ਸਫ਼ਲਤਾ ਨਾਲ @media ਰੂਲ ਦੀ ਪਹਿਲੀ ਬਰਾਉਜ਼ਰ ਆਵ੍ਰਣ ਦਾ ਨੰਬਰ ਦਿੱਤਾ ਗਿਆ ਹੈ。

ਚਰਮੀ IE / ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
21 9 3.5 4.0 9