CSS ਮੀਡੀਆ ਸਵਾਲ: ਕਦਮ ਦਾ ਵੇਰਵਾ, ਫੀਚਰ ਅਤੇ ਸਮੀਖਿਆ ਕੇ ਕਦਮ

ਇੱਕ ਵਾਰ ਇੱਕ ਵਾਰ ਤੇ, ਉਹ ਲੋਕ ਜੋ ਵੈੱਬਸਾਈਟ 'ਤੇ ਜਾਓ ਸਮਾਰਟ ਫੋਨ ਅਤੇ ਇਸੇ ਮੋਬਾਈਲ ਜੰਤਰ ਹੈ, ਜੋ ਕਿ ਦਾ ਕਾਰਨ ਹੋਰ ਸਿਰਫ ਹੱਸ ਹੈ. ਕਈ ਸਿਰਫ਼ ਇਸ ਨੂੰ ਸਮਝ ਨਾ ਸਕਿਆ, ਇਸ ਲਈ ਜ਼ਰੂਰੀ ਹੈ, ਹੁੰਦਾ ਹੈ, ਕਿਉਕਿ ਅਜਿਹੇ ਇੱਕ ਆਰਾਮਦਾਇਕ ਡੈਸਕਟਾਪ ਕੰਪਿਊਟਰ! ਕੀ, ਤੇ ਸਭ, ਲੈਪਟਾਪ. ਇਸ ਦੇ ਨਾਲ, ਮੋਬਾਈਲ ਇੰਟਰਨੈੱਟ 'ਫਿਰ ਮਹਿੰਗਾ ਸੀ.

ਟਾਈਮ ਪਾਸ. ਨੂੰ ਇੰਟਰਨੈੱਟ ਸਸਤਾ ਹੋ ਗਿਆ. ਵਿਕਰੀ ਲਈ ਹੋਰ ਅਤੇ ਹੋਰ ਜਿਆਦਾ ਫੋਨ ਅਤੇ ਟੈਬਲੇਟ ਨੂੰ ਬਾਹਰ ਆਇਆ ਸੀ. ਕੁਝ ਦੇਰ ਬਾਅਦ, ਪ੍ਰਸਿੱਧ ਸਾਈਟ ਦੇ ਮਾਲਕ ਨੇ ਉਸ ਦੇ ਸਿਰ ਵਲੂੰਧਰਨ ਹੈਰਾਨ. ਅਨੁਸਾਰ ਅੰਕੜੇ, ਇਸ ਨੂੰ ਲੱਗਦਾ ਸੀ ਕਿ ਉਹ ਆਪਣੇ ਸਰੋਤ ਹਨ ਹੋਰ ਸੰਭਾਵਨਾ ਦੇ ਦੌਰੇ ਨੂੰ ਆਪਣੇ ਸਮਾਰਟ ਵੱਧ ਦੇ ਨਾਲ ਇੱਕ ਸਟੇਸ਼ਨਰੀ ਪੀਸੀ!

ਉਸ ਵੇਲੇ ਸਾਈਟ ਮੋਬਾਈਲ ਜੰਤਰ ਤੇ ਵੇਖਣ ਲਈ ਅਨੁਕੂਲ ਹੈ, ਨਾ ਗਿਆ ਹੈ. ਆਪਣੇ ਫੋਨ 'ਤੇ ਪੁਰਾਣੇ ਜੀਵਨ ਲਈ ਜਾਣਾ, ਤੁਹਾਨੂੰ ਛੋਟੇ ਅੱਖਰ, ਛੋਟੇ ਮੇਨੂ ਇਕਾਈ ਹੈ ਅਤੇ ਬੇਅਰਾਮ ਬਟਨ ਨੂੰ ਨਾਲ ਸੰਤੁਸ਼ਟ ਹੋਣ ਦੀ ਲੋੜ ਸੀ.

CSS ਮੀਡੀਆ ਸਵਾਲ ਦੇ ਆਗਮਨ ਦੇ

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

ਫਿਰ CSS3 ਮੀਡੀਆ ਸਵਾਲ ਆਇਆ ਸੀ. ਨਾਲ ਗਤੀਸ਼ੀਲ ਡਿਜ਼ਾਇਨ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੀ ਸਿਰਫ਼ ਸੰਭਾਵਨਾ ਆਇਆ.

ਗਤੀਸ਼ੀਲ ਡਿਜ਼ਾਇਨ ਕੀ ਹੈ?

ਜੇ ਸਰੋਤ ਦੀ ਦਿੱਖ ਨੂੰ ਸਕਰੀਨ ਨੂੰ ਇਸ ਦੀ ਝਲਕ, ਜਿਸ 'ਤੇ ਦੇ ਆਕਾਰ ਅਨੁਸਾਰ ਬਦਲਦਾ ਹੈ ਇਹ ਮਿਆਦ ਵਰਤਿਆ ਗਿਆ ਹੈ. ਇਸ ਦਾ ਕੀ ਮਤਲਬ ਹੈ? ਇਹ ਸਧਾਰਨ ਹੈ.

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

ਇਹ "ਕਲਾਸੀਕਲ" ਲੇਆਉਟ ਚਿੱਤਰ. ਇਹ ਇਸ ਲਈ ਹੈ, ਸੰਪੂਰਣ ਕਰਨ ਲਈ ਇੱਕ ਨਿੱਜੀ ਕੰਪਿਊਟਰ, ਪਰ ਨਾ ਬਹੁਤ ਸੁਵਿਧਾਜਨਕ ਲਈ ਮੋਬਾਈਲ ਫੋਨ. ਹਰੀਜ਼ਟਲ ਮੇਨੂ ਬਹੁਤ ਵਿਆਪਕ ਹੈ. ਸੰਪਰਕ ਹਨ ਸਥਿਤ ਦੂਰ ਤੱਕ ਇਕ ਦੂਜੇ ਨੂੰ. ਅਤੇ ਬਾਹੀ ਦੀ ਜਾਣਕਾਰੀ ਨੂੰ ਵਰਤਣ ਦੇ ਸਾਰੇ ਕਰਨ ਲਈ ਸਕਰੀਨ ੋਲ ਕਰਨ ਲਈ ਹੈ ਜਾਵੇਗਾ, ਅਤੇ ਇਸ ਨੂੰ ਹਰ ਕਿਸੇ ਦੇ ਸੁਆਦ ਨੂੰ ਨਹੀ ਹੈ.

ਸਮੱਸਿਆ CSS3 ਮੀਡੀਆ ਸਵਾਲ ਦੇ ਨਾਲ ਇੱਕ ਅਨੁਕੂਲ ਅਤੇ ਮੋਬਾਈਲ ਡਿਜ਼ਾਇਨ ਵਰਤ ਕੇ ਹੱਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ. ਕੇ ਦਾ ਉਪਯੋਗ ਕਰਕੇ ਮੀਡੀਆ ਸਵਾਲ ਹੈ, ਸਾਨੂੰ ਮੁੜ ਇਹ ਟਿਕਾਣੇ ਦਾ ਇਹ ਸਮੱਗਰੀ ਨੂੰ ... ਹੁਣ ਇਸ ਨੂੰ ਕੰਮ ਵਰਗਾ ਇਸ ਨੂੰ:

• ਚੋਟੀ ਦੇ - ਲੰਬਕਾਰੀ ਨੇਵੀਗੇਸ਼ਨ ਮੇਨੂ ਦੇ ਨਾਲ ਯੂਨਿਟ;
• ਇਸ ਨੂੰ ਹੇਠ - ਸੰਪਰਕ, ਜੋ ਕਿ ਹੁਣ ਇਹ ਵੀ ਲੰਬਕਾਰੀ ਰੱਖਿਆ ਕਰ ਰਹੇ ਹਨ ਦੇ ਨਾਲ ਬਲਾਕ;
• ਬਾਹੀ ਸਮੱਗਰੀ ਨੂੰ <ਮੁੱਖ> ਟੈਗ ਸਮੱਗਰੀ ਦੇ ਪਾਸੇ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀ ਹੈ, ਅਤੇ ਇਸ ਨੂੰ ਉਪਰ.

ਇਹ ਹੀ ਹੈ ਜੋ ਜਿੰਮੇਵਾਰ ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਮੀਡੀਆ ਸਵਾਲ ਦੇ ਨਾਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਦੀ ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਨ ਹੈ. ਅਸਲ ਵਿਚ ਇੱਕ ਬਹੁਤ ਕੁਝ ਹੋਰ ਸੰਭਾਵਨਾ.

ਇਸ ਲਈ ਮੀਡੀਆ ਨੂੰ ਬੇਨਤੀ ਕੀ ਹੈ?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. CSS ਤਹਿਤ ਮੀਡੀਆ ਸਵਾਲ CSS3 ਮਿਆਦ ਮੋਡੀਊਲ, ਜਿਸ ਨਾਲ ਤੁਹਾਨੂੰ ਸਫ਼ੇ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਕੁਝ ਹਾਲਾਤ ਦੇ ਅਨੁਕੂਲ ਹੋਣ ਲਈ ਕਰ ਸਕਦੇ ਹੋ ਸਮਝਣ. ਉਦਾਹਰਨ ਲਈ, ਇਸ ਨੂੰ ਸਕਰੀਨ ਦਾ ਆਕਾਰ, ਜ ਸਥਿਤੀ ਜੰਤਰ (ਪੋਰਟਰੇਟ / ਦੇਖਿਆ) ਦਾ ਜਵਾਬ ਦੇਣ ਲਈ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ.

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

CSS ਮੀਡੀਆ ਸਵਾਲ ਬਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ

Safari до Chrome. ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਉਜ਼ਰ ਸਫਾਰੀ ਤੱਕ Chrome ਵਿੱਚ ਇਸ ਤਕਨਾਲੋਜੀ ਦਾ ਸਮਰਥਨ,. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. ਇਹ ਸੱਚ ਹੈ ਕਿ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਦੇ ਪੁਰਾਣੇ ਵਰਜਨ ਦੇ ਉਪਭੋਗੀ ਨੂੰ ਇੱਕ ਸਮੱਸਿਆ ਹੈ ... ਪਰ ਇਸ ਨੂੰ ਇਮਾਨਦਾਰੀ ਨਾਲ ਸਾਹਮਣਾ ਕਰੀਏ - ਜਿਹੜੇ ਲੋਕ ਅਜੇ ਵੀ ਵੱਡੀ ਉਮਰ ਦੇ IE ਵਰਤ ਰਹੇ ਹੋ, ਹੁਣੇ ਹੀ ਕੁਝ ਵੀ ਇਸ ਬਾਰੇ ਸਮੱਸਿਆ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ.

ਸੰਟੈਕਸ ਅਨੁਕੂਲ ਲੇਆਉਟ ਮੀਡੀਆ ਸਵਾਲ

html. ਸ਼ਾਇਦ ਤੁਹਾਨੂੰ ਜਦ ਕਿ HTML ਨੂੰ ਵਰਗੀ ਫਾਇਲ ਨਾਲ ਜੁੜੇ ਮੀਡੀਆ ਸਵਾਲ ਦਾ ਸਾਹਮਣਾ ਕੀਤਾ ਗਿਆ ਹੈ. ਹੈ, ਜੋ ਕਿ ਲਾਈਨ ਯਾਦ ਹੈ? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. <ਲਿੰਕ ਨੂੰ rel = 'ਸਟਾਇਲਸ਼ੀਟ' ਦੀ ਕਿਸਮ = 'text / CSS' ਐਛਆਰਇਐਫ = http: // ਸਾਈਟ /article/320575/%E2%80%99style.css%E2%80%99%3E ਕਈ ਵਾਰ ਅੰਤ 'ਤੇ ਇਕ ਹੋਰ ਪੈਰਾਮੀਟਰ ਸ਼ਾਮਿਲ ਕਰਦਾ ਹੈ, ਜੋ ਵੇਖਿਆ: ਮੀਡੀਆ = 'ਸਕਰੀਨ'.

ਇਹ ਇੱਕ ਮੀਡੀਆ ਸਵਾਲ ਬਣ ਗਿਆ ਹੈ! ਉਹ ਦੱਸਦਾ ਹੈ ਕਿ ਨਿਰਧਾਰਤ ਸ਼ੈਲੀ ਫਾਇਲ ਟੀਵੀ ਨਾਲ ਲੈਸ ਜੰਤਰ ਤੇ ਕੰਮ ਕਰੇਗਾ. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. ਇਸ ਦੀ ਬਜਾਇ, ਤੁਹਾਨੂੰ ਪਰਦੇ ਪ੍ਰਿੰਟ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦੇ ਹੋ - ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਫਾਇਲ ਦਾ ਸਟਾਈਲ, ਲਾਗੂ ਕਰ ਰਹੇ ਹਨ, ਜੇ ਸਫ਼ਾ ਛਾਪਿਆ ਗਿਆ ਹੈ.

ਤੁਹਾਨੂੰ ਹੇਠ ਗੁਣ ਨੂੰ ਵਰਤ ਸਕਦੇ ਹੋ:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; ਸਾਰੇ - ਯੂਨੀਵਰਸਲ ਨੂੰ ਵਰਜਨ, ਚੁੱਪ ਕਰ ਕੇ ਵਰਤਿਆ, ਸਾਰੇ ਮਾਮਲੇ ਵਿੱਚ ਲਾਗੂ ਕੀਤਾ ਗਿਆ ਹੈ;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - ਸਕਰੀਨ (ਕੰਪਿਊਟਰ, ਲੈਪਟਾਪ, ਟੇਬਲੇਟ, ਸਮਾਰਟ, ਅਤੇ ਸਭ, ਜੋ ਕਿ ਇੱਕ ਇੱਕ ਡਿਸਪਲੇਅ ਨਾਲ ਲੈਸ ਹੈ);
• принтеры; ਪ੍ਰਿੰਟ - ਪ੍ਰਿੰਟਰ;
• – проекторы; ਪ੍ਰਾਜੈਕਸ਼ਨ - ਪ੍ਰੋਜੈਕਟਰ;
• – речевые браузеры; ਭਾਸ਼ਣ - ਭਾਸ਼ਣ ਬਰਾਊਜ਼ਰ;
• – для устройств для слабовидящих; ਬ੍ਰੇਲ - ਕਮਜ਼ੋਰ ਕਰਨ ਲਈ ਜੰਤਰ;
• – для экранов телевизоров. ਟੀਵੀ - ਟੀ ਵੀ ਸਕਰੀਨ ਦੇ ਲਈ.

ਜੋ ਕਿ ਸਭ ਨੂੰ ਨਹੀ ਹੈ. , но они используются редко. ਕਈ ਹੋਰ ਵਾਧੂ ਗੁਣ ਹਨ CSS ਮੀਡੀਆ ਕਿਊਰੀ ਕਰਦਾ ਹੈ, ਪਰ ਉਹ ਘੱਟ ਹੀ ਵਰਤੇ ਗਏ ਹਨ. all. ਇਸ ਦੇ ਨਾਲ, ਤੁਹਾਨੂੰ ਇੱਕ ਪੈਰਾਮੀਟਰ ਦਿਓ, ਨਾ ਕਰਦੇ, - ਸਭ ਤੇ ਮੂਲ.

ਮੀਡੀਆ ਸਵਾਲ ਦੀ ਬਣਤਰ

css. ਇਸ ਦੀ ਬਜਾਇ ਇੱਕ ਸ਼ੈਲੀ ਫਾਇਲ ਬਣਾਉਣ ਦੀ, ਤੁਹਾਨੂੰ ਕੋਡ CSS ਇਸਤੇਮਾਲ ਕਰ ਸਕਦੇ ਹੋ. ਇਹ ਇਸ ਨੂੰ ਦਿਸਦਾ ਹੈ:

(тут будут стили } @media ਸਕਰੀਨ ਅਤੇ (ਅਧਿਕਤਮ-ਚੌੜਾਈ: 1024px) {( ਸਟਾਈਲ ਹਨ}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. ਅਤੇ ਵਾਧੂ ਪੈਰਾਮੀਟਰ - @media ਨਿਰਦੇਸ਼ ਹੈ, ਜੋ ਕਿ ਇਸ ਨੂੰ ਸਾਫ ਹੈ, ਜੋ ਕਿ ਮੀਡੀਆ ਨੂੰ ਸਵਾਲ ਦੇ ਲਈ ਵਰਤਿਆ ਗਿਆ ਹੈ ਕਰਦਾ ਹੈ ਦੇ ਬਾਅਦ, ਉਥੇ ਜੰਤਰ (ਸਕਰੀਨ ਨੂੰ ਸਕਰੀਨ) ਦੀ ਕਿਸਮ ਦਾ ਇੱਕ ਸੰਕੇਤ ਹੈ. Max Width. ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, CSS ਮੀਡੀਆ ਸਵਾਲ ਮੈਕਸ ਚੌੜਾਈ ਸੰਪਤੀ ਦਾ ਇਸਤੇਮਾਲ ਕਰੋ. px. ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇਹ ਸਟਾਈਲ ਸੂਚੀਬੱਧ ਵਿਚ ਇਹ ਚ ਜਾਵੇਗਾ ਸ਼ਾਮਲ, ਜੇ ਇਹ ਉਪਭੋਗੀ ਦਾ ਇਹ ਜੰਤਰ ਨੂੰ ਸਕਰੀਨ ਅਕਾਰ 1024 px. и and не обязательны. ਸਕਰੀਨ ਅਤੇ ਬੰਧਨ ਨਾ. ਤੁਹਾਨੂੰ ਹੋ ਸਕਦਾ ਹੈ ਲਿਖਣ ਨੂੰ ਇਹ:

@media (ਅਧਿਕਤਮ-ਚੌੜਾਈ: 1024px) {}

ਵਿੱਚ ਅਜਿਹੇ ਇੱਕ ਮਾਮਲੇ ', ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਕਰਨ ਲਈ ਹੋ ਵਰਤੀ' ਤੇ ਕਿਸੇ ਵੀ ਜੰਤਰ ਨੂੰ, ਨਾ ਕਿ ਸਿਰਫ ਉਹ ਹਨ ਲੈਸ ਨਾਲ ਟੀਵੀ.

ਮਲਟੀਪਲ ਪੈਰਾਮੀਟਰ ਿਨਰਧਾਰਤ ਕਰੋ

ਤੁਹਾਨੂੰ ਕਈ ਜੰਤਰ ਹੈ, ਜੋ ਕਿ ਸ਼ੈਲੀ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ ਦੀ ਸੀਮਾ ਹੈ, ਨੂੰ ਸੀਮਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਮੰਨ ਲਓ. px, но не больше 500 px. ਦਾ ਕਹਿਣਾ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਸਮਾਰਟਫੋਨ ਤੱਕ ਆਪਣੀ ਸਾਈਟ ਤੇ ਜਾਓ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਚਾਹੁੰਦੇ ਹੋ, ਨੂੰ ਸਕਰੀਨ ਅਕਾਰ ਘੱਟ ਵੱਧ 320 px ਹੈ, ਪਰ ਕੋਈ ਹੋਰ 500 px ਨਹੀ ਹੈ. ਅਜਿਹੇ ਇੱਕ ਮਾਮਲੇ ਵਿੱਚ, ਬੇਨਤੀ ਨੂੰ ਫਾਰਮ ਨੂੰ ਲੱਗਦਾ ਹੈ:

@media (ਮਿੰਟ-ਚੌੜਾਈ: 320px) ਅਤੇ (ਅਧਿਕਤਮ-ਚੌੜਾਈ: 500px) {}

and. ਤੁਹਾਨੂੰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਨਾਲ ਜਾਣੂ ਹਨ, ਜੇ, ਤੁਹਾਨੂੰ NJ ਕੀ ਆਪਰੇਟਰ ਲਾਗੂ ਕੀਤਾ ਹੈ ਅਤੇ ਕਰ ਰਿਹਾ ਹੈ. ਲਈ ਉਹ ਜੋ ਪਤਾ ਨਾ: ਇਸ ਨੂੰ ਚੈੱਕ ਜੇ ਦੋਨੋ ਹਾਲਾਤ ਹਨ, ਇਹ ਸਹੀ ਹੈ. ਪੁੱਛਗਿੱਛ ਸਕਰੀਨ ਵਿੱਚ ਈ ਸਰਗਰਮੀ ਦਾ ਦਰਜਾ 320 ਦੇ ਮੁਕਾਬਲੇ ਘੱਟ ਹੈ, ਨਾ ਹੈ ਅਤੇ ਨਾ ਵੱਧ 500 ਪਿਕਸਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ.

and не ограничивается одним. ਅਤੇ ਚਾਲਕ ਦੀ ਗਿਣਤੀ ਨੂੰ ਇੱਕ ਕਰਨ ਲਈ ਹੀ ਸੀਮਿਤ ਨਹੀ ਹੈ. ਤੁਹਾਨੂੰ ਦੇ ਤੌਰ ਤੇ ਬਹੁਤ ਤੁਹਾਨੂੰ ਚਾਹੁੰਦੇ ਦੇ ਤੌਰ ਤੇ ਪਾ ਸਕਦਾ ਹੈ. ਟੀਵੀ ਲਈ - ਉਦਾਹਰਨ ਲਈ, ਸਮਾਰਟ ਫੋਨ ਅਤੇ ਕਾਫ਼ੀ ਵੱਖ-ਵੱਖ ਲਈ ਇੱਕ ਨੂੰ ਕੁਝ ਦਾ ਆਕਾਰ ਸਕਰੀਨ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ.

ਇਕ ਜ਼ਰੂਰੀ ਗੱਲ - ਉਪਭੋਗੀ ਨੂੰ ਜੰਤਰ ਦੀ ਸਥਿਤੀ ਹੈ. ਕਿਸੇ ਨੇ ਤਸਵੀਰ ਅਨੁਕੂਲਨ ਵਿੱਚ ਆਪਣੇ ਸਮਾਰਟਫੋਨ, ਕਿਸੇ ਨੂੰ 'ਤੇ ਵੈੱਬਸਾਈਟ ਦੀ ਝਲਕ - ਦੇਖਿਆ ਹੈ. orientation:portrait, для вторых, соответственно, orientation:landscape. ਦੂਜਾ, ਕ੍ਰਮਵਾਰ, ਸਥਿਤੀ ਦੇ ਲਈ, ਪੋਰਟਰੇਟ:: ਸਾਬਕਾ ਲਈ, ਤੁਹਾਨੂੰ ਇੱਕ ਵਾਧੂ ਹਾਲਤ ਨੂੰ ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ਦੇਖਿਆ. @media. ਇਹ ਲਾਈਨ ਨੂੰ ਵੀ @media ਟੀਮ ਨੂੰ ਹੇਠ ਬਰੈਕਟ ਵਿੱਚ ਵਿਖਾਇਆ ਹੈ. and. ਤੁਹਾਨੂੰ ਹੋ ਸਕਦਾ ਹੈ ਹਿੱਸਾ ਦੁਆਰਾ ਅਤੇ.

ਇਕ ਹੋਰ ਦਿਲਚਸਪ ਬਾਰੀਕੀ. and вы вполне можете использовать оператор or. ਇਸ ਦੀ ਬਜਾਇ, ਅਤੇ ਤੁਹਾਨੂੰ ਨਾਲ ਨਾਲ ਜ ਓਪਰੇਟਰ ਨੂੰ ਵਰਤ ਸਕਦੇ ਹੋ. ਉਸ ਨੇ ਇਹ ਸੱਚ ਹੈ, ਹੋਣ ਲਈ ਮੰਗ ਵਿੱਚ ਘੱਟੋ-ਘੱਟ ਇੱਕ ਦੀ ਹਾਲਤ ਦੀ ਲੋੜ ਹੈ! ਉਦਾਹਰਨ ਲਈ:

) {} @media (ਅਧਿਕਤਮ-ਚੌੜਾਈ: 500px) ਜ (ਸਥਿਤੀ: ਪੋਰਟਰੇਟ) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. ਸਕਰੀਨ ਘੱਟ ਵੱਧ 500 px ਜ ਵਰਤਣ ਪੋਰਟਰੇਟ ਸਿਥਤੀ ਿਗਆਨ ਹੈ, ਜੇ, ਚ ਵਿਚ ਸਟਾਈਲ ਲਾਗੂ ਹੋਵੇਗਾ.

ਜੁਰਮਾਨਾ-ਟਿਊਨਿੰਗ ਲਈ ਨਾ ਕੀਵਰਡ

not. ਮੀਡੀਆ ਕਿਊਰੀ, ਤੁਹਾਨੂੰ ਸ਼ਬਦ ਨਾ ਪਾ ਸਕਦੇ ਹੋ. ਇਹ ਇਸ ਲਈ ਹੈ ਸਮਾਪਤ ਦੇ ਤੌਰ ਤੇ ਹੇਠ ਲਿਖੇ:

@media (ਨਾ ਅਧਿਕਤਮ-ਚੌੜਾਈ: 700px ) {}

ਜੇ ਵੱਧ ਚੌੜਾਈ 700 ਪਿਕਸਲ ਦੇ ਬਰਾਬਰ ਨਹੀ ਹੈ ਵਿਸ਼ੇਸ਼ਤਾ ਸਰਗਰਮ ਰਹੇ ਹਨ.

ਮੀਡੀਆ ਫੀਚਰ

ਸਵਾਲ ਕਈ ਪ੍ਰੀ-ਸਥਾਪਿਤ ਫੰਕਸ਼ਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ. W3C. ਨੂੰ ਜਾਣੂ ਆਪਣੇ ਆਪ ਨੂੰ ਦੇ ਨਾਲ ਸਾਰੇ ਤੁਹਾਨੂੰ ਹੋ ਸਕਦਾ ਹੈ ਆਨਲਾਈਨ W3C. ਕਾਫ਼ੀ ਜ਼ਿਆਦਾਤਰ coders ਦੇ ਮਾਲਕ ਨੂੰ ਤਿੰਨ ਮੁੱਖ:

• (о нем мы уже говорили); ਸਥਿਤੀ (ਸਾਨੂੰ ਹੀ ਇਸ ਬਾਰੇ ਗੱਲ ਕੀਤੀ);
• (ширина, ее тоже упоминали); ਚੌੜਾਈ (ਚੌੜਾਈ, ਇਸ ਨੂੰ ਇਹ ਵੀ ਜ਼ਿਕਰ ਕੀਤਾ ਗਿਆ ਹੈ);
• (высота). ਉਚਾਈ (ਉਚਾਈ).

ਕੱਦ ਘੱਟ ਹੀ ਵਰਤਿਆ ਗਿਆ ਹੈ, ਪਰ ਕੁਝ ਕੇਸ, ਜਿਸ ਵਿਚ ਇਸ ਸੈਟਿੰਗ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ.

ਕਰਨਾ ਹੈ ਅਤੇ ਜਿੱਥੇ ਬੇਨਤੀ ਨੂੰ ਰੱਖਣ ਲਈ?

ਕਈ ਵੈੱਬ ਡਿਜ਼ਾਈਨਰ ਅੱਜਕੱਲ੍ਹ ਉਹ ਫਾਇਲ ਸ਼ੈਲੀ ਦੇ ਅੰਤ ਤੱਕ ਕਰ ਦਿੱਤਾ. ਉਦਾਹਰਨ ਲਈ, ਪਹਿਲੇ ਮੁੱਖ ਸਟਾਈਲ ਦੀ ਸੂਚੀ, ਅਤੇ ਫਿਰ, ਦਸਤਾਵੇਜ਼ ਦੇ ਤਲ ਵਿੱਚ, ਰੱਖਿਆ ਬੇਨਤੀ ਨੂੰ.

ਇਹ ਬਹੁਤ ਹੀ ਚੰਗਾ ਨਹੀ ਹੈ. ਹੋਰ ਬਹੁਤ ਸੁਵਿਧਾਜਨਕ ਲਈ ਸਥਾਨ ਦਾ ਦਰਜਾ ਲਈ ਵੱਖ ਵੱਖ ਜੰਤਰ ਦਾ ਸੱਜਾ ਬਾਅਦ ਇਹ ਮੁੱਖ ਸਟਾਈਲ. ਉਦਾਹਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਇੱਕ Div ਹੈ, ਜੋ ਲਾਲ ਫੋਟ ਰੰਗ ਨਿਰਧਾਰਿਤ ਹੈ:

Div {

ਦੇ ਰੰਗ: ਲਾਲ;

}

ਤੁਰੰਤ ਬਾਅਦ ਦੀ ਬੇਨਤੀ ਦਾ ਅਰਥ ਹੈ:

@media (ਮਿੰਟ-ਚੌੜਾਈ: 320px) {}

ਵਿਸ਼ੇਸ਼ਤਾ ਦੱਸਦਾ ਹੈ.

ਅਜਿਹੇ ਇੱਕ ਪਹੁੰਚ ਹੈ, ਜੇ ਤੁਹਾਨੂੰ "ਨੂੰ ਵਰਤ ਰਹੇ ਸ਼ੁੱਧ» CSS ਮੁਸ਼ਕਲ ਹੋ ਜਾਵੇਗਾ. ਪਰੀਪਰੋਸੈੱਸਰ ਦੀ ਮਦਦ ਕਰਨ ਲਈ. ਉਹ ਹੋਰ ਸਹੀ ਕਾਰਜ ਨੂੰ ਬੇਨਤੀ ਲਈ ਦਿਲਚਸਪ ਮੌਕੇ ਦੇ ਇੱਕ ਬਹੁਤ ਹੈ.

ਇੱਕ ਹੋਰ ਚੋਣ ਹੈ - ਵੱਖ-ਵੱਖ ਸ਼ੈਲੀ ਫਾਇਲ ਵਿੱਚ ਵੱਖ ਵੱਖ ਜੰਤਰ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ ਰੱਖਣ. ਇਹ ਖਾਸ ਕਰਕੇ ਲਾਭਦਾਇਕ ਹੈ, ਜੇ ਤੁਹਾਨੂੰ ਆਯਾਤ ਕਰਨ ਲਈ ਇੱਕ ਪਰੀਪਰੋਸੈੱਸਰ ਨਿਰਦੇਸ਼ ਨੂੰ ਵਰਤਣ ਹੈ. ਇਸ ਦਾ ਨਤੀਜਾ ਸੋਧ ਕਰਨ ਲਈ ਇੱਕ ਆਸਾਨ, ਸਾਫ਼ ਕੋਡ ਹੈ.

ਜੋ ਕਿ ਇੱਕ ਨੂੰ ਵਰਤੋ? ਇਹ ਸਭ ਨਿੱਜੀ ਪਸੰਦ ਹੈ ਅਤੇ ਟੀਮ ਦੇ ਗੁਣਾ ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ. ਸ਼ਾਇਦ, ਆਪਣੇ ਕੰਮ ਦੇ ਸਥਾਨ ਵਿਚ ਮੀਡੀਆ ਨੂੰ ਸਵਾਲ ਰੱਖ ਸਵੀਕਾਰ ਕੀਤਾ ਜਾਵੇਗਾ ਦੀ ਇੱਕ ਨੂੰ ਕੁਝ ਤਰੀਕੇ ਹਨ.

ਇਸ ਦੇ ਨਾਲ, ਨਾ ਭੁੱਲੋ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਨਵੀਨਤਮ ਸਾਫਟਵੇਅਰ ਨਾਲ ਆਪਣੀ ਜ਼ਿੰਦਗੀ ਸਾਦੀ ਕਰ ਸਕਦਾ ਹੈ. ਇਹ ਸਿਰਫ਼ ਪਰੀਪਰੋਸੈੱਸਰ ਬਾਰੇ ਨਹੀ ਹੈ. Gulp ਗਰੁੱਪ CSS ਮੀਡੀਆ ਸਵਾਲ ਦੇ ਨਾਲ ਕਾਰਜ ਨੂੰ ਬਹੁਤ ਹੀ ਆਸਾਨ ਬਣਾ ਸਕਦਾ ਹੈ. ਇਸ ਸੰਦ ਜ ਇਸ ਦੇ analogs ਦੇ ਕਿਸੇ ਵੀ ਪੰਗਾ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ.