ਤੁਸੀਂ CSS ਮੀਡੀਆ ਸਵਾਲ ਕਿਵੇਂ ਲਿਖੋਗੇ?

ਦੋ-ਚੌੜਾਈ ਅਤੇ ਅਧਿਕਤਮ-ਚੌੜਾਈ ਮੀਡੀਆ ਸਵਾਲਾਂ ਲਈ ਸੰਟੈਕਸ

ਜਿੰਮੇਵਾਰ ਵੈਬ ਡਿਜ਼ਾਈਨ ਵੈੱਬਪੇਜ ਬਣਾਉਣ ਦਾ ਇੱਕ ਤਰੀਕਾ ਹੈ, ਜਿੱਥੇ ਉਹ ਪੰਨੇ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਇੱਕ ਵਿਜ਼ਟਰ ਦੇ ਸਕ੍ਰੀਨ ਆਕਾਰ ਦੇ ਆਧਾਰ ਤੇ ਆਪਣੇ ਲੇਆਉਟ ਅਤੇ ਦਿੱਖ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹਨ. ਵੱਡੀਆਂ ਸਕ੍ਰੀਨਾਂ ਉਹਨਾਂ ਵੱਡੇ ਡਿਸਪਲੇਅ ਦੇ ਅਨੁਕੂਲ ਲੇਆਉਟ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੀਆਂ ਹਨ ਜਦਕਿ ਛੋਟੇ ਡਿਵਾਈਸਾਂ ਜਿਹੜੀਆਂ ਮੋਬਾਈਲ ਫੋਨਾਂ ਉਸੇ ਰੂਪ ਵਿੱਚ ਉਸੇ ਵੈੱਬਸਾਈਟ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੀਆਂ ਹਨ ਜੋ ਉਸ ਛੋਟੀ ਸਕ੍ਰੀਨ ਲਈ ਢੁਕਵਾਂ ਹੁੰਦੀਆਂ ਹਨ. ਇਹ ਪਹੁੰਚ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਵਧੀਆ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਅਤੇ ਇਹ ਖੋਜ ਇੰਜਣ ਰੈਂਕਿੰਗ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਵਿੱਚ ਵੀ ਸਹਾਇਤਾ ਕਰ ਸਕਦਾ ਹੈ. ਜਵਾਬਦੇਹ ਵੈਬ ਡਿਜ਼ਾਈਨ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਸੀਐਸਐਸ ਮੀਡੀਆ ਸਵਾਲ ਹੈ.

ਮੀਡੀਆ ਸਵਾਲ ਤੁਹਾਡੇ ਵੈੱਬਸਾਈਟ ਦੇ CSS ਫਾਈਲ ਦੇ ਅੰਦਰ ਥੋੜੇ ਸ਼ਰਤੀਆ ਬਿਆਨ ਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਤੁਹਾਨੂੰ ਕੁਝ CSS ਨਿਯਮਾਂ ਨੂੰ ਸੈਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਮਿਲਦੀ ਹੈ ਜੋ ਇੱਕ ਖ਼ਾਸ ਸ਼ਰਤਾਂ ਪੂਰੀਆਂ ਹੋਣ ਤੋਂ ਬਾਅਦ ਹੀ ਪ੍ਰਭਾਵ ਪਾ ਸਕਣਗੇ - ਜਿਵੇਂ ਕਿ ਜਦੋਂ ਇੱਕ ਸਕ੍ਰੀਨ ਦਾ ਆਕਾਰ ਨਿਸ਼ਚਿਤ ਥ੍ਰੈਸ਼ਹੋਲਡ ਤੋਂ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਹੁੰਦਾ ਹੈ

ਐਕਸ਼ਨ ਵਿੱਚ ਮੀਡੀਆ ਸਵਾਲ

ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਵੈਬਸਾਈਟ ਤੇ ਮੀਡੀਆ ਸਵਾਲਾਂ ਦਾ ਉਪਯੋਗ ਕਿਵੇਂ ਕਰਦੇ ਹੋ? ਇੱਥੇ ਇੱਕ ਬਹੁਤ ਹੀ ਸਧਾਰਨ ਉਦਾਹਰਨ ਹੈ:

1. ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਵਿਜ਼ੁਅਲ ਸਟਾਈਲ ਤੋਂ ਬਿਲਕੁਲ ਵਧੀਆ ਢਾਂਚਾ ਵਾਲੇ HTML ਦਸਤਾਵੇਜ਼ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋਗੇ (ਇਹ ਉਹੀ ਹੈ ਜੋ CSS ਲਈ ਹੈ)
2. ਤੁਹਾਡੀ CSS ਫਾਈਲ ਵਿੱਚ, ਤੁਸੀਂ ਆਮ ਤੌਰ ਤੇ ਪੇਜ਼ ਨੂੰ ਸਟਾਇਲ ਕਰਕੇ ਅਤੇ ਵੈਬਸਾਈਟ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇ ਲਈ ਇੱਕ ਬੇਸਲਾਈਨ ਸੈਟ ਕਰ ਕੇ ਕਰ ਸਕਦੇ ਹੋ. ਕਹੋ ਕਿ ਤੁਸੀਂ ਪੇਜ ਦੇ ਫੌਂਟ ਦਾ ਆਕਾਰ 16 ਪਿਕਸਲ ਦੀ ਸੀ, ਤੁਸੀਂ ਇਹ CSS ਲਿਖ ਸਕਦੇ ਹੋ: body {font-size: 16px; }
3. ਹੁਣ, ਤੁਸੀਂ ਵੱਡੇ ਸਕ੍ਰੀਨਾਂ ਲਈ ਫਾਂਟ ਸਾਈਜ਼ ਵਧਾਉਣਾ ਚਾਹ ਸਕਦੇ ਹੋ ਜਿਹਨਾਂ ਕੋਲ ਅਗਾਊਂ ਰੀਅਲ ਅਸਟੇਟ ਹੈ. ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਮੀਡੀਆ ਸਵਾਲ ਆਉਂਦੇ ਹਨ. ਤੁਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਇੱਕ ਮੀਡੀਆ ਸਵਾਲ ਸ਼ੁਰੂ ਕਰੋਗੇ: @ਮੀਡੀਆ ਸਕ੍ਰੀਨ ਅਤੇ (ਘੱਟ-ਚੌੜਾਈ: 1000px) {}
4. ਇਹ ਮੀਡੀਆ ਸਵਾਲ ਦਾ ਸੰਟੈਕਸ ਹੈ. ਇਹ ਮੀਡੀਆ ਕਵੇਰੀ ਖੁਦ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਲਈ @ ਮੀਡੀਆ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ ਅਗਲਾ ਤੁਸੀਂ "ਮੀਡਿਆ ਕਿਸਮ" ਨੂੰ ਸੈਟ ਕਰਦੇ ਹੋ, ਜੋ ਇਸ ਕੇਸ ਵਿਚ "ਸਕ੍ਰੀਨ" ਹੈ. ਇਹ ਡੈਸਕਟੌਪ ਕੰਪਿਊਟਰ ਸਕ੍ਰੀਨਾਂ, ਟੈਬਲੇਟਾਂ, ਫੋਨਾਂ ਆਦਿ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ. ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ "ਮੀਡੀਆ ਵਿਸ਼ੇਸ਼ਤਾ" ਨਾਲ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਨੂੰ ਸਮਾਪਤ ਕਰਦੇ ਹੋ. ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਇਹ "ਅੱਧਾ-ਚੌੜਾਈ: 1000 ਪੈਕਸ" ਹੈ ਇਸ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਮੀਡੀਆ ਕਤਾਰ ਡਿਸਪਲੇਅ ਲਈ ਘੱਟ ਤੋਂ ਘੱਟ 1000 ਪਿਕਸਲ ਦੀ ਚੌੜਾਈ ਨਾਲ ਜਗਾ ਲਵੇਗੀ.

1. ਮੀਡੀਆ ਸਵਾਲ ਦੇ ਇਹਨਾਂ ਤੱਤਾਂ ਦੇ ਬਾਅਦ, ਤੁਸੀਂ ਇੱਕ ਓਪਨਿੰਗ ਅਤੇ ਕਲੋਜ਼ਿੰਗ ਕਰਲੀ ਬਰੇਸ ਜੋੜਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਆਮ CSS ਨਿਯਮ ਵਿੱਚ ਕੀ ਕਰੋਗੇ.
2. ਇਕ ਮੀਡੀਆ ਸਵਾਲ ਦਾ ਅੰਤਮ ਪਗ਼ ਇਹ ਹੈ ਕਿ CSS ਨਿਯਮਾਂ ਨੂੰ ਜੋੜਨਾ ਹੈ ਜੋ ਤੁਸੀਂ ਇਸ ਸ਼ਰਤ ਨੂੰ ਪੂਰਾ ਹੋਣ ਤੇ ਲਾਗੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ. ਤੁਸੀਂ ਇਹਨਾਂ CSS ਨਿਯਮਾਂ ਨੂੰ ਕਰਲੀ ਬ੍ਰੇਸ ਦੇ ਵਿਚਕਾਰ ਜੋੜਦੇ ਹੋ ਜੋ ਮੀਡੀਆ ਦੀ ਕਾਪੀ ਬਣਾਉਂਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ: @ ਮੀਡੀਆ ਸਕਰੀਨ ਅਤੇ (ਘੱਟ-ਚੌੜਾਈ: 1000 ਪੈਕਸ) {body {font-size: 20px; }
3. ਜਦੋਂ ਮੀਡੀਆ ਕੜੀਆਂ ਦੀਆਂ ਸ਼ਰਤਾਂ ਪੂਰੀਆਂ ਹੁੰਦੀਆਂ ਹਨ (ਬ੍ਰਾਉਜ਼ਰ ਵਿੰਡੋ ਦੀ ਘੱਟੋ ਘੱਟ 1000 ਪਿਕਸਲ ਚੌੜੀ ਹੁੰਦੀ ਹੈ), ਤਾਂ ਇਹ CSS ਸਟਾਈਲ ਪ੍ਰਭਾਵਿਤ ਹੋਵੇਗੀ, ਜੋ ਸਾਡੇ ਸਾਈਟ ਦੇ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ 16 ਪਿਕਸਲ ਤੋਂ ਬਦਲਦੀ ਹੈ ਜੋ ਅਸੀਂ ਅਸਲ ਵਿੱਚ 20 ਪਿਕਸਲ ਦੇ ਸਾਡੇ ਨਵੇਂ ਮੁੱਲ ਲਈ ਸਥਾਪਿਤ ਕੀਤੀ ਸੀ.

ਹੋਰ ਸ਼ੈਲੀਜ਼ ਨੂੰ ਜੋੜਨਾ

ਤੁਸੀਂ ਆਪਣੀ ਵੈਬਸਾਈਟ ਦੇ ਵਿਜ਼ੁਅਲ ਦਿੱਖ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਲੋੜੀਂਦੇ ਇਸ ਮੀਡੀਆ ਸਵਾਲ ਦੇ ਅੰਦਰ ਦੇ ਰੂਪ ਵਿੱਚ ਬਹੁਤ ਸਾਰੇ CSS ਨਿਯਮ ਪਾ ਸਕਦੇ ਹੋ. ਉਦਾਹਰਣ ਦੇ ਲਈ, ਜੇਕਰ ਤੁਸੀਂ ਸਿਰਫ 20 ਪਿਕਸਲ ਦੇ ਫੌਂਟ-ਅਕਾਰ ਨੂੰ ਵਧਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਪਰ ਸਾਰੇ ਪੈਰਿਆਂ ਦੇ ਰੰਗ ਨੂੰ ਬਲੈਕ (# 000000) ਵਿੱਚ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਇਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ:

@ਮੀਡੀਆ ਸਕ੍ਰੀਨ ਅਤੇ (ਘੱਟ-ਚੌੜਾਈ: 1000 ਪੈਕਸ) {ਸਰੀਰ {ਫੌਂਟ-ਸਾਈਜ਼: 20px; } p {color: # 000000; }}

ਹੋਰ ਮੀਡੀਆ ਸਵਾਲ ਸ਼ਾਮਲ ਕਰਨਾ

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਤੁਸੀਂ ਹਰ ਵੱਡੇ ਆਕਾਰ ਲਈ ਹੋਰ ਮੀਡੀਆ ਸਵਾਲ ਜੋੜ ਸਕਦੇ ਹੋ, ਇਸ ਤਰ੍ਹਾਂ ਆਪਣੀ ਸ਼ੈਲੀ ਸ਼ੀਟ ਵਿੱਚ ਜੋੜ ਸਕਦੇ ਹੋ:

@ਮੀਡੀਆ ਸਕ੍ਰੀਨ ਅਤੇ (ਘੱਟ-ਚੌੜਾਈ: 1000 ਪੈਕਸ) {ਸਰੀਰ {ਫੌਂਟ-ਸਾਈਜ਼: 20px; } p {color: # 000000; {} @ ਮੀਡੀਆ ਸਕ੍ਰੀਨ ਅਤੇ (ਘੱਟ-ਚੌੜਾਈ: 1400 ਪੈਕਸ) {ਸਰੀਰ {ਫੌਂਟ-ਸਾਈਜ਼: 24 ਪੈਕਸ; }}

ਪਹਿਲੀ ਮੀਡੀਆ ਸਵਾਲ 1000 ਪਿਕਸਲ ਦੀ ਚੌੜਾਈ ਵਿੱਚ ਫਿੱਟ ਹੋ ਜਾਣਗੇ, ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ 20 ਪਿਕਸਲ ਵਿੱਚ ਤਬਦੀਲ ਕਰ ਦੇਵੇਗਾ. ਫਿਰ, ਇੱਕ ਵਾਰ ਜਦੋਂ ਬਰਾਊਜ਼ਰ 1400 ਪਿਕਸਲ ਤੋਂ ਉੱਪਰ ਸੀ ਤਾਂ ਫੌਂਟ ਦਾ ਸਾਈਜ 24 ਪਿਕਸਲ ਵਿੱਚ ਬਦਲ ਜਾਵੇਗਾ. ਤੁਸੀਂ ਆਪਣੀ ਖਾਸ ਵੈਬਸਾਈਟ ਲਈ ਜਿੰਨੇ ਲੋੜੀਂਦੇ ਮੀਡੀਆ ਸਵਾਲ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ.

ਘੱਟੋ-ਚੌੜਾਈ ਅਤੇ ਵੱਧ ਤੋਂ ਵੱਧ ਚੌੜਾਈ

"ਮਿਨ-ਚੌੜਾਈ" ਜਾਂ "ਅਧਿਕਤਮ-ਚੌੜਾਈ" ਦੇ ਨਾਲ - ਮੀਡੀਆ ਸਵਾਲ ਲਿਖਣ ਦੇ ਆਮ ਤੌਰ ਤੇ ਦੋ ਤਰੀਕੇ ਹਨ. ਅਜੇ ਤੱਕ, ਅਸੀਂ "ਘੱਟ-ਚੌੜਾਈ" ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਿਆ ਹੈ. ਇਹ ਇੱਕ ਵਾਰ ਜਦੋਂ ਘੱਟੋ ਘੱਟ ਚੌੜਾਈ ਬਰਾਊਜ਼ਰ ਪਹੁੰਚ ਗਿਆ ਤਾਂ ਮਾਧਿਅਮ ਸਵਾਲਾਂ ਨੂੰ ਪ੍ਰਭਾਵਤ ਕਰਨ ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ. ਇਸ ਲਈ "ਘੱਟ-ਚੌੜਾਈ: 1000 ਪੈਕਸ" ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੀ ਇੱਕ ਕਿਊਰੀ ਲਾਗੂ ਹੋਵੇਗੀ, ਜਦੋਂ ਬਰਾਊਜ਼ਰ ਘੱਟੋ ਘੱਟ 1000 ਪਿਕਸਲ ਚੌੜਾ ਹੁੰਦਾ ਹੈ. ਮੀਡੀਆ ਦੀ ਇਹ ਸ਼ੈਲੀ ਉਦੋਂ ਵਰਤੀ ਜਾਂਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ "ਮੋਬਾਇਲ-ਪਹਿਲੇ" ਤਰੀਕੇ ਨਾਲ ਇੱਕ ਸਾਈਟ ਬਣਾ ਰਹੇ ਹੁੰਦੇ ਹੋ.

ਜੇ ਤੁਸੀਂ "ਅਧਿਕਤਮ-ਚੌੜਾਈ" ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਇਹ ਉਲਟ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ. ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਇਸ ਆਕਾਰ ਤੋਂ ਹੇਠਾਂ ਡਿੱਗਣ ਤੇ "ਅਧਿਕਤਮ-ਚੌੜਾਈ: 1000 ਪੈਕਸ" ਦੀ ਇੱਕ ਮੀਡੀਆ ਕਤਾਰ ਲਾਗੂ ਹੋਵੇਗੀ.

ਪੁਰਾਣੇ ਬਰਾਡਿਆਂ ਬਾਰੇ

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

1/24/17 ਤੇ ਜੇਰਮੀ ਗਿਰਾਰਡ ਦੁਆਰਾ ਸੰਪਾਦਿਤ