CSS میڈیا کوآرڈینٹس

CSS2 ਨੇ ਮੀਡੀਆ ਟਾਈਪ ਲਿਆਂਦਾ ਹੈ

CSS2 ਵਿੱਚ ਇੰਜਾਮ ਲਿਆ ਗਿਆ ਹੈ @media ਰੂਲ, ਜਿਸ ਨਾਲ ਵੱਖ-ਵੱਖ ਮੀਡੀਆ ਟਾਈਪਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਸਟਾਈਲ ਰੂਲਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ਸੰਭਵ ਹੁੰਦਾ ਹੈ।

ਉਦਾਹਰਣ: ਤੁਸੀਂ ਕੰਪਿਊਟਰ ਸਕਰੀਨ ਲਈ ਸਟਾਈਲ ਰੂਲਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਹੋ ਸਕਦਾ ਹੈ, ਇੱਕ ਪ੍ਰਿਟਰ ਲਈ, ਇੱਕ ਮੋਬਾਈਲ ਉਪਕਰਣ ਲਈ, ਅਤੇ ਹੀ ਟੀਵੀ ਲਈ ਵੀ, ਆਦਿ ਆਦਿ।

不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。

CSS3 引入了媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 方向（平板电脑/手机处于横向还是纵向模式）
  • 分辨率

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

ਬਰੌਜਰ ਸਮਰਥਨ

ਚੁਣੌਤੀ ਵਿੱਚ ਨੰਬਰ ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰੌਜਰਾਂ ਦਾ ਸੂਚਕਾਂਕ ਹੈ @media ਬਰੌਜਰ ਦਾ ਪਹਿਲਾ ਸ਼ਾਮਲ ਸਿਸਟਮ ਜੋ ਮੀਡੀਆ ਕਿਊਰੀ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਦਾ ਹੈ。

ਸੁਪਨਾ
@media 21.0 9.0 3.5 4.0 9.0

ਮੀਡੀਆ ਕਿਊਰੀ ਗਰੇਫਿਕ

ਮੀਡੀਆ ਕਿਊਰੀ ਇੱਕ ਮੀਡੀਆ ਤਰੀਕੇ ਨਾਲ ਬਣਦੀ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ ਇੱਕ ਜਾਂ ਵੱਧ ਪ੍ਰਗਟਾਵਾਂ ਹੋ ਸਕਦੇ ਹਨ ਜੋ true ਜਾਂ false ਦੇ ਰੂਪ ਵਿੱਚ ਵਿਚਾਰੀ ਜਾ ਸਕਦੇ ਹਨ。

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

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

ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ not ਜਾਂ only ਕੰਜੈਕਟਰ ਵਰਤਦੇ ਹੋ ਤਾਂ ਮੀਡੀਆ ਤਰੀਕਾ ਵਾਲਾ ਕੰਜੈਕਟਰ ਵਾਲਾ ਕੰਜੈਕਟਰ ਚੋਣਯੋਗ ਹੈ ਅਤੇ ਪ੍ਰਾਮਾਣਿਕ ਹੈ all ਤਰੀਕਾ

ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਮੀਡੀਆ ਲਈ ਵੱਖ-ਵੱਖ ਸਟਾਈਲ ਸ਼ੇਅਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 ਮੀਡੀਆ ਤਰੀਕਾ

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

ਮੀਡੀਆ ਕਿਊਰੀ ਦਾ ਇੱਕ ਸਰਲ ਉਦਾਹਰਣ

ਮੀਡੀਆ ਕਿਊਰੀ ਦੇ ਇੱਕ ਤਰੀਕਾ ਹੈ ਕਿ ਸਟਾਈਲ ਸ਼ੇਅਰ ਵਿੱਚ ਇੱਕ ਬਦਲਾਅ ਦਾ ਸਮਾਨ ਹੈ।

ਇਹ ਉਦਾਹਰਣ ਵਿੱਚ ਵਿਨਿਯੋਗ ਦੀ ਚੌਡਾਈ 480 ਪਿਕਸਲ ਜਾਂ ਇਸ ਤੋਂ ਵੱਧ ਹੋਣ ਤੇ ਪਿੱਨੇ ਰੰਗ ਨੂੰ ਸ਼ਾਨਦਾਰ ਹਰੀ ਰੰਗ ਵਿੱਚ ਬਦਲਦਾ ਹੈ (ਜੇਕਰ ਵਿਨਿਯੋਗ ਦੀ ਚੌਡਾਈ 480 ਪਿਕਸਲ ਤੋਂ ਘੱਟ ਹੈ ਤਾਂ ਪਿੱਨੇ ਰੰਗ ਫੁੱਲੀ ਰੰਗ ਹੋਵੇਗਾ):

ਉਦਾਹਰਣ

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

خود کو کچھ کریں

ਇਹ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ ਕਿ ਜੇਕਰ ਵਿਨਿਯੋਗ ਦੀ ਚੌਡਾਈ 480 ਪਿਕਸਲ ਜਾਂ ਇਸ ਤੋਂ ਵੱਧ ਹੈ ਤਾਂ ਮੇਨੂ ਪੰਨੇ ਦੇ ਖੱਬੇ ਪਾਸੇ ਤੱਕ ਫਲੌਟ ਕਰ ਦਿੱਤਾ ਜਾਵੇਗਾ (ਜੇਕਰ ਵਿਨਿਯੋਗ ਦੀ ਚੌਡਾਈ 480 ਪਿਕਸਲ ਤੋਂ ਘੱਟ ਹੈ ਤਾਂ ਮੇਨੂ ਪੰਨੇ ਸਮੱਗਰੀ ਦੇ ਉੱਪਰ ਹੋਵੇਗਾ):

ਉਦਾਹਰਣ

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

خود کو کچھ کریں

بھی کچھ میڈیا کوآرڈینٹس مثال

بھی کچھ میڈیا کوآرڈینٹس مثال دیکھنے کے لئے آئندہ صفحے پر جائیں:CSS MQ مثال.

CSS @media مراجع

تمام میڈیا کی نوعیتوں اور خصوصیات/عبارات کا پورا ملاحظہ کریں، وہاں دیکھئے جائیں CSS مراجع میں @media قوانین.