CSS ਮੀਡੀਆ ਕਿਊਰੀ - ਉਦਾਹਰਣ
- پچھلے پیج CSS ਮੀਡੀਆ ਕਿਊਰੀ
- پائیدھی پیج ریسپانسیو ویب ڈیزائن کی معرف
CSS ਮੀਡੀਆ ਕਿਊਰੀ - ਹੋਰ ਉਦਾਹਰਣ
ਹੁਣ ਮੈਂ ਮੀਡੀਆ ਕਿਊਰੀ ਦੇ ਹੋਰ ਉਦਾਹਰਣਾਂ ਨੂੰ ਦੇਖੀਏ。
ਮੀਡੀਆ ਕਿਊਰੀ ਇੱਕ ਵਿਆਪਕ ਤਕਨੀਕ ਹੈ, ਜੋ ਵੱਖ-ਵੱਖ ਉਪਕਰਣਾਂ ਨੂੰ ਅਨੁਕੂਲ ਸਟਾਈਲ ਸ਼ੇਅਰ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ。
ਹੇਠਾਂ ਇੱਕ ਸਰਲ ਉਦਾਹਰਣ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਜੋ ਵੱਖ-ਵੱਖ ਉਪਕਰਣਾਂ ਦੇ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਨੂੰ ਬਦਲਣ ਦਾ ਹੈ:
ਉਦਾਹਰਣ
/* ਬੋਡੀ ਦੇ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਨੂੰ ਟਾਨ ਕਲਰ ਵਿੱਚ ਸੈਟ ਕਰੋ */
body {
background-color: tan;
}
/* ਸਿਫ਼ਟੀ ਸਕਰੀਨ ਦੇ 992 ਪਾਇਕਸ ਜਾਂ ਛੋਟੇ ਤੋਂ, ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਨੂੰ ਬਲੂ ਕਲਰ ਵਿੱਚ ਸੈਟ ਕਰੋ */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* ਸਿਫ਼ਟੀ ਸਕਰੀਨ ਦੇ 600 ਪਾਇਕਸ ਜਾਂ ਛੋਟੇ ਤੋਂ, ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਨੂੰ ਓਲਿਵ ਕਲਰ ਵਿੱਚ ਸੈਟ ਕਰੋ */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
ਤੁਸੀਂ ਜਾਣਣਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਅਸੀਂ ਕਿਉਂ 992px ਅਤੇ 600px ਤੋਂ ਸਪਸ਼ਟ ਰੂਪ ਵਿੱਚ ਵਰਤਦੇ ਹਾਂ? ਇਹ ਇਸ ਕਿਉਂਕਿ ਮੌਜੂਦਾ ਪ੍ਰਯੋਗਸ਼ਾਲਾ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ ਮੌਜੂਦਾ ਗਿਆਨ ਦਾ ਅਧਾਰ ਹੈ。 ریسپانسیو ویب ڈیزائن کا تعلیم مادول ਮੈਂ ਸਿੱਖਿਆ ਵਿੱਚ ਆਮ ਟ੍ਰੈਂਸਫਰਮਰਜ਼ ਬਾਰੇ ਜਾਣਕਾਰੀ ਮਿਲ ਸਕਦੀ ਹੈ。
ਮੇਨੂ ਦੀ ਮੀਡੀਆ ਕਿਊਰੀ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ, ਅਸੀਂ ਮੀਡੀਆ ਕਿਊਰੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰੈਸਪੋਨਸਿਵ ਨੇਵੀਗੇਸ਼ਨ ਮੇਨੂ ਬਣਾਇਆ ਹੈ ਜੋ ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਸਾਈਜ਼ਾਂ ਉੱਤੇ ਵੱਖ-ਵੱਖ ਰੂਪ ਵਿੱਚ ਦਿਖਾਈ ਦੇਵੇਗਾ。
ਵੱਡੇ ਸਕਰੀਨ:
ਛੋਟੇ ਸਕਰੀਨ:
ਉਦਾਹਰਣ
/* ਨੇਵੀਗੇਸ਼ਨ ਕੰਟੇਨਰ */
.topnav {
overflow: hidden;
background-color: #333;
}
/* ਨੇਵੀਗੇਸ਼ਨ ਲਿੰਕ */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 600 ਪਾਇਕਸ ਜਾਂ ਘੱਟ ਦੀ ਚੌਦਾਈ ਉੱਤੇ, ਨੇਵੀਗੇਸ਼ਨ ਲਿੰਕਾਂ ਨੂੰ ਹੈਰਾਫ਼ਤ ਹੋਵੇ, ਨਹੀਂ ਕਿ ਸਮਾਂਤਰ */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
ਸਤੰਭ ਦੀ ਮੀਡੀਆ ਕਿਊਰੀ
ਮੀਡੀਆ ਕਿਊਰੀ ਦਾ ਇੱਕ ਆਮ ਉਪਯੋਗ ਹੈ ਕਿ ਫਲੈਕਸੀਬਲ ਲੇਆਉਟ ਬਣਾਓ। ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਇੱਕ ਲੇਆਉਟ ਬਣਾਇਆ ਹੈ ਜੋ ਚਾਰ ਸਤੰਭ, ਦੋ ਸਤੰਭ ਅਤੇ ਪੂਰੇ ਚੌਦਾਈ ਵਿੱਚ ਬਦਲਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਸਾਈਜ਼ਾਂ ਵਿੱਚ ਹੈ:
ਵੱਡੇ ਸਕਰੀਨ:
ਮੱਧਮ ਸਕਰੀਨ:
ਛੋਟੇ ਸਕਰੀਨ:
ਉਦਾਹਰਣ
/* ਚਾਰ ਬਰਾਬਰ ਸਤੰਭ ਦੀ ਸਮਾਂਤਰ ਫਲੌਟ */
.column {
float: left;
width: 25%;
}
/* 992px ਜਾਂ ਘੱਟ ਦੀ ਚੌਦਾਈ ਉੱਤੇ, ਚਾਰ ਸਤੰਭ ਤੋਂ ਦੋ ਸਤੰਭ ਵਿੱਚ ਬਦਲਦੇ ਹਨ */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* ਕੇਵਲ 600 ਪਾਇਕਸ ਜਾਂ ਘੱਟ ਦੀ ਚੌਦਾਈ ਉੱਤੇ, ਹਰ ਸਤੰਭ ਹੈਰਾਫ਼ਤ ਹੋਵੇ, ਨਹੀਂ ਕਿ ਸਮਾਂਤਰ */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
نکاتی:ਫਲੈਕਸਬਾਕਸ (ਪ੍ਰਿੰਟ ਵਿੱਚ ਦੇਖੋ) ਦੀ ਵਰਤੋਂ ਕਰੋ। ਪਰ ਇੰਟਰਨੈੱਟ ਈਕਸਪਲੋਰਰ 10 ਜਾਂ ਪੁਰਾਣੇ ਇਹ ਸਮਰਥ ਨਹੀਂ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ IE6-10 ਦਾ ਸਮਰਥਨ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਫਲੌਟ (ਇਸ ਤਰ੍ਹਾਂ) ਦੀ ਵਰਤੋਂ ਕਰੋ。
ਯਦੀ ਤੁਸੀਂ ਫਲੈਕਸ ਬਕਸ ਲੇਆਉਟ ਮੌਡਿਊਲ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਚਾਹੁੰਦੇ ਹੋ, ਸਰਵਸਾਧਾਰਣ CSS فلیکس باکس ਇਸ ਚਾਪਟਰ ਨੂੰ ਪੜ੍ਹੋ。
ਯਦੀ ਤੁਸੀਂ ਰੈਸਪੋਨਸਿਵ ਵੈੱਬ ਡਿਜ਼ਾਇਨ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਚਾਹੁੰਦੇ ਹੋ, ਸਾਡੇ ریسپانسیو ویب ڈیزائن کا تعلیم مادول.
ਉਦਾਹਰਣ
/* ਫਲੈਕਸ ਬਕਸ ਦਾ ਕੰਟੇਨਰ */
.row {
display: flex;
flex-wrap: wrap;
}
/* ਚਾਰ ਬਰਾਬਰ ਸਤੰਭ ਬਣਾਓ */
.column {
flex: 25%;
padding: 20px;
}
/* 992px ਜਾਂ ਘੱਟ ਦੀ ਚੌਦਾਈ ਉੱਤੇ, ਚਾਰ ਸਤੰਭ ਤੋਂ ਦੋ ਸਤੰਭ ਵਿੱਚ ਬਦਲਦੇ ਹਨ */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* ਕੇਵਲ 600 ਪਾਇਕਸ ਜਾਂ ਘੱਟ ਦੀ ਚੌਦਾਈ ਉੱਤੇ, ਹਰ ਸਤੰਭ ਹੈਰਾਫ਼ਤ ਹੋਵੇ, ਨਹੀਂ ਕਿ ਸਮਾਂਤਰ */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
ਮੀਡੀਆ ਕਿਊਰੀ ਨਾਲ ਏਜ਼ੈਂਟਸ ਨੂੰ ਛੁਪਾਓ
ਮੀਡੀਆ ਕਿਊਰੀ ਦਾ ਇੱਕ ਆਮ ਉਪਯੋਗ ਹੈ ਕਿ ਅਲੱਗ-ਅਲੱਗ ਸਕਰੀਨ ਸਾਈਜ਼ ਉੱਤੇ ਏਜ਼ੈਂਟਸ ਨੂੰ ਛੁਪਾਓ:
ਛੋਟੇ ਸਕਰੀਨ 'ਤੇ ਮੈਂ ਛੁਪਾਵਾਂਗਾ।
ਉਦਾਹਰਣ
/* ਜਦੋਂ ਸਕਰੀਨ ਸਾਈਜ਼ 600px ਜਾਂ ਛੋਟੇ ਹੋਵੇ ਤਾਂ ਇਹ ਐਲੀਮੈਂਟ ਛੁਪਾਓ */
@media screen and (max-width: 600px) {
ڈی وی ڈیمو: {
display: none;
}
}
ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਨਾਲ ਫੋਂਟ ਸਾਈਜ਼ ਬਦਲਣਾ
ਤੁਸੀਂ ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਸਾਈਜ਼ਾਂ 'ਤੇ ਐਲੀਮੈਂਟ ਦੇ ਫੋਂਟ ਸਾਈਜ਼ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ
ਵਿਵਸਥਿਤ ਫੋਂਟ ਸਾਈਜ਼
ਉਦਾਹਰਣ
/* ਜਦੋਂ ਸਕਰੀਨ ਸਾਈਜ਼ 600 ਪਿਕਸਲ ਤੋਂ ਵੱਧ ਹੋਵੇ ਤਾਂ <div> ਦਾ ਫੋਂਟ ਸਾਈਜ਼ 80px ਸੈਟ ਕਰੋ */
@media screen and (min-width: 600px) {
ڈی وی ڈیمو: {
font-size: 80px;
}
}
/* ਜਦੋਂ ਸਕਰੀਨ ਸਾਈਜ਼ 600px ਜਾਂ ਛੋਟੇ ਹੋਵੇ ਤਾਂ <div> ਦਾ ਫੋਂਟ ਸਾਈਜ਼ 30px ਸੈਟ ਕਰੋ */
@media screen and (max-width: 600px) {
ڈی وی ڈیمو: {
font-size: 30px;
}
}
ਲਚਕੀਲਾ ਇਮੇਜ ਲਾਇਬ੍ਰੇਰੀ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਨੂੰ flexbox ਦੇ ਨਾਲ ਵਰਤਦੇ ਹਾਂ ਤਾਂਕਿ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਇਮੇਜ ਲਾਇਬ੍ਰੇਰੀ ਬਣਾਈਆਂ ਜਾਣ:
ਉਦਾਹਰਣ
ਲਚਕੀਲਾ ਵੈਬਸਾਈਟ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਨੂੰ flexbox ਦੇ ਨਾਲ ਵਰਤਦੇ ਹਾਂ ਤਾਂਕਿ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਵੈਬਸਾਈਟ ਬਣਾਈਆਂ ਜਾਣ ਜਿਸ ਵਿੱਚ ਲਚਕੀਲੀ ਨੇਵੀਗੇਸ਼ਨ ਅਤੇ ਲਚਕੀਲਾ ਸਮੱਗਰੀ ਹੋਵੇ:
ਉਦਾਹਰਣ
ਦਿਸ਼ਾ: ਅਰਥਵਾਨ / ਪੱਥਰੀ
ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਨੂੰ ਪੇਜ ਦੇ ਸਜਾਇਬ ਰੂਪ ਨੂੰ ਬਦਲਣ ਲਈ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਜਿਸ ਨੂੰ ਪੱਥਰੀ ਪੈਮਾਨੇ ਕਿਹਾ ਜਾਂਦਾ ਹੈ:
ਤੁਸੀਂ ਇੱਕ ਸੈੱਟ ਸੀਐੱਸਐੱਸ ਪ੍ਰਤੀਯੋਗੀਆਂ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਕੇਵਲ ਬਰਾਊਜ਼ਰ ਦੀ ਚੌਦਾਰ ਪੈਮਾਨੇ ਉੱਚਾਈ ਤੋਂ ਵੱਡੀ ਹੋਣ ਤਾਂ ਹੀ ਲਾਗੂ ਹੁੰਦੇ ਹਨ ਜਿਵੇਂ ਕਿ ਪੱਥਰੀ ਪੈਮਾਨੇ:
ਉਦਾਹਰਣ
ਜੇਕਰ ਦਿਸ਼ਾ ਪੱਥਰੀ ਮੋਡ ਵਿੱਚ ਹੋਵੇ ਤਾਂ ਹਲਕੇ ਨੀਲੇ ਪਿੱਛੇਚਾਰ ਰੰਗ ਦਾ ਇਸਤੇਮਾਲ ਕਰੋ:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
ਸਭ ਤੋਂ ਛੋਟੀ ਚੌਦਾਰ ਪੈਮਾਨੇ ਤੋਂ ਸਭ ਤੋਂ ਵੱਡੀ ਚੌਦਾਰ ਪੈਮਾਨੇ
ਤੁਸੀਂ max-width ਅਤੇ min-width ਪ੍ਰਤੀਯੋਗੀਆਂ ਨਾਲ ਸਭ ਤੋਂ ਛੋਟੀ ਅਤੇ ਸਭ ਤੋਂ ਵੱਡੀ ਚੌਦਾਰ ਪੈਮਾਨੇ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ
ਉਦਾਹਰਣ ਵਜੋਂ ਜਦੋਂ ਬਰਾਊਜ਼ਰ ਦੀ ਚੌਦਾਰ ਪੈਮਾਨੇ 600 ਪਿਕਸਲ ਤੋਂ 900 ਪਿਕਸਲ ਦਰਮਿਆਨ ਹੋਵੇ ਤਾਂ <div> ਐਲੀਮੈਂਟ ਦਾ ਆਕਾਰ ਬਦਲੋ:
ਉਦਾਹਰਣ
@media screen and (max-width: 900px) and (min-width: 600px) {
ڈی وی ڈیمو: {
فونٹ سائز: 50پیکسل;
پینڈنگ: 50پیکسل;
بوردر: 8پیکسل سولڈ بلک;
بگینکاگرون: یلو;
}
}
ਮੁਦਦਤਾ ਵਾਲਾ ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਦੀ ਵਰਤੋਂ: ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਕੋਮਾ (ਲਗਭਗ ਓਰ ਕਿਊਰੀਜ਼ ਪ੍ਰਤੀਕ) ਦੇ ਰੂਪ ਵਿੱਚ ਮੁਦਦਤਾ ਵਾਲੇ ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਨੂੰ ਮੌਜੂਦਾ ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਵਿੱਚ ਜੋੜਿਆ ਹੈ:
ਉਦਾਹਰਣ
/* ਜਦੋਂ ਚੌਦਾਰ ਪੈਮਾਨੇ 600 ਪਿਕਸਲ ਤੋਂ 900 ਪਿਕਸਲ ਦਰਮਿਆਨ ਹੋਵੇ ਜਾਂ 1100 ਪਿਕਸਲ ਤੋਂ ਵੱਧ ਹੋਵੇ - <div> ਦਾ ਆਕਾਰ ਬਦਲੋ */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
ڈی وی ڈیمو: {
فونٹ سائز: 50پیکسل;
پینڈنگ: 50پیکسل;
بوردر: 8پیکسل سولڈ بلک;
بگینکاگرون: یلو;
}
}
CSS @media مرجع دستنوشت
تمام میڈیا کا تیزی سے جائزہ لینے اور تمام خصوصیات/عبارات کا مکمل مرجع دیکھیئے CSS مرجع میں @media رول.
نکاتی:ریسپانسیو ویب ڈیزائن کے بارے میں مزید معلومات اور اس میں میڈیا کوئری برونپوائنٹس کا استعمال سیکھنے کیلئے، ہمارا ریسپانسیو ویب ڈیزائن کا تعلیم مادول.
- پچھلے پیج CSS ਮੀਡੀਆ ਕਿਊਰੀ
- پائیدھی پیج ریسپانسیو ویب ڈیزائن کی معرف
