ਲੇਖ ਡਾਇਰੈਕਟਰੀ
ਵਧਦੇ ਮੋਬਾਈਲ ਇੰਟਰਨੈਟ ਕਾਰਨ,Wechat ਮਾਰਕੀਟਿੰਗਮੋਬਾਈਲ ਫੋਨਾਂ ਦੀ ਪ੍ਰਸਿੱਧੀ ਬਣ ਗਈ ਹੈਜਿੰਦਗੀਟੂਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
ਇੱਕ ਵੈਬਸਾਈਟ ਬਣਾਓਟੈਂਪਲੇਟ, ਇਸਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈਵਰਡਪਰੈਸਲਈ ਅਨੁਕੂਲ ਥੀਮ:
- ਜੇਕਰ ਵਰਡਪਰੈਸ ਥੀਮ ਡਿਵੈਲਪਰ ਨੇ ਵਰਡਪਰੈਸ ਥੀਮ ਪੇਜ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰਦੇ ਸਮੇਂ HTML 5 ਚਿੱਤਰ ਅਨੁਕੂਲ ਸਕ੍ਰੀਨ ਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਨਹੀਂ ਬਣਾਇਆ ਹੈ ...
- ਇੱਕ ਮੋਬਾਈਲ ਡਿਵਾਈਸ 'ਤੇ ਵੈਬਸਾਈਟ ਨੂੰ ਬ੍ਰਾਊਜ਼ ਕਰਨਾ, ਇੱਕ ਬਹੁਤ ਹੀ ਬਦਸੂਰਤ ਤਸਵੀਰ ਡਿਸਲੋਕੇਸ਼ਨ ਹੋਵੇਗੀ, ਅਤੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਬਹੁਤ ਮਾੜਾ ਹੈ!
CSS ਚਿੱਤਰ ਅਨੁਕੂਲਨ ਦਾ ਕੀ ਅਰਥ ਹੈ?
CSS ਚਿੱਤਰ ਸਵੈ-ਅਨੁਕੂਲਤਾ CSS ਕੋਡ ਦੁਆਰਾ, html ਵੈਬ ਪੇਜ ਵਿੱਚ ਚਿੱਤਰ ਬਣਾਉਣ ਦਾ ਹਵਾਲਾ ਦਿੰਦਾ ਹੈ:
- ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਨੂੰ ਆਟੋਮੈਟਿਕਲੀ ਅਨੁਕੂਲ ਬਣਾਓ।
- img ਟੈਗ ਨੂੰ ਆਪਣੇ ਆਪ ਅਨੁਪਾਤਕ ਤੌਰ 'ਤੇ ਸਕੇਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਅਗਲਾ,ਚੇਨ ਵੇਲਿਯਾਂਗਮੈਂ ਤੁਹਾਡੇ ਨਾਲ CSS img ਅਨੁਪਾਤਕ ਸਕੇਲਿੰਗ ਕੋਡ ^_^ ਸਾਂਝਾ ਕਰਾਂਗਾ
CSS ਚਿੱਤਰ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਅਨੁਕੂਲਿਤ ਕੋਡ
html ਵਿੱਚ ਚਿੱਤਰ ਸ਼ਾਮਲ ਕਰੋ:
ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਚਿੱਤਰ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਿੱਚ ਸਥਿਰ ਰਹਿਣ ਦੀ ਬਜਾਏ ਸਕ੍ਰੀਨ ਦੇ ਛੋਟੇ ਆਕਾਰ ਦੇ ਅਨੁਕੂਲ ਹੋਵੇ।
ਤੁਸੀਂ ਆਪਣੀ ਵਰਡਪਰੈਸ ਥੀਮ ▼ ਦੀ style.css ਫਾਈਲ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }ਬਿਆਨ ਇੱਥੇmax-widthਅਧਿਕਤਮ ਚੌੜਾਈ ਨਿਯਮ
- ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨ ਲਈ ਕਿ ਸਾਰੀਆਂ ਤਸਵੀਰਾਂ ਵੱਧ ਤੋਂ ਵੱਧ 100% 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਣ (ਜਿਵੇਂ ਕਿ ਉਹਨਾਂ ਨੂੰ ਸਿਰਫ ਉਹਨਾਂ ਦੇ ਆਪਣੇ ਚਿੱਤਰਾਂ ਵਾਂਗ ਹੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ)।
- ਇਸ ਬਿੰਦੂ 'ਤੇ, ਜੇਕਰ ਚਿੱਤਰ ਵਾਲਾ ਤੱਤ (ਉਦਾਹਰਨ ਲਈ, ਚਿੱਤਰ ਵਾਲਾ ਬੌਡੀ ਜਾਂ ਡਿਵ) ਚਿੱਤਰ ਦੀ ਅੰਦਰੂਨੀ ਚੌੜਾਈ ਤੋਂ ਛੋਟਾ ਹੈ, ਤਾਂ ਚਿੱਤਰ ਨੂੰ ਵੱਧ ਤੋਂ ਵੱਧ ਉਪਲਬਧ ਥਾਂ ਨੂੰ ਭਰਨ ਲਈ ਸਕੇਲ ਕੀਤਾ ਜਾਵੇਗਾ।
width:auto;ਮਤਲਬ ਆਟੋਮੈਟਿਕ ਚੌੜਾਈ
\9 ਇਹ ਹੈਕ ਸੀਐਸਐਸ ਲਿਖਣ ਦਾ ਇੱਕ ਤਰੀਕਾ ਹੈ।
- ਇਸ ਤਰ੍ਹਾਂ, "\9" ਨੂੰ ਆਮ CSS ਕੋਡ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ, ਕੇਵਲ IE ਬ੍ਰਾਊਜ਼ਰ ਇਸਨੂੰ ਪਛਾਣ ਸਕਦਾ ਹੈ, ਹੋਰ ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਕਥਨ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਨਗੇ।
- ਇਹ ਅਨੁਕੂਲ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਸਮਰੱਥ ਕਰਦੇ ਹੋਏ, ਬ੍ਰਾਊਜ਼ਰ ਵਿਭਿੰਨਤਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰੇਗਾ।
ਚੌੜਾਈ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਨਹੀਂ ਕਰਦੇ: 100%?
ਚਿੱਤਰਾਂ ਦੀ ਆਟੋਮੈਟਿਕ ਸਕੇਲਿੰਗ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੀਆਂ ਜਾਣ ਵਾਲੀਆਂ ਚੌੜਾਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ, ਉਦਾਹਰਨ ਲਈ.width：100％.
ਹਾਲਾਂਕਿ, ਇਹ ਨਿਯਮ ਇੱਥੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ।
- ਕਿਉਂਕਿ ਇਹ ਨਿਯਮ ਇਸ ਨੂੰ ਆਪਣੇ ਡੱਬੇ ਵਾਂਗ ਚੌੜਾ ਕਰ ਦੇਵੇਗਾ।
- ਉਹਨਾਂ ਮਾਮਲਿਆਂ ਵਿੱਚ ਜਿੱਥੇ ਕੰਟੇਨਰ ਚਿੱਤਰ ਤੋਂ ਬਹੁਤ ਚੌੜਾ ਹੈ, ਚਿੱਤਰ ਨੂੰ ਬੇਲੋੜੀ ਖਿੱਚਿਆ ਜਾਵੇਗਾ.
ਸਾਵਧਾਨੀਆਂ
CSS ਚੋਣਕਾਰ ਕੀ ਹਨ? ਕਲਾਸ ਅਤੇ ਆਈਡੀ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?ਹੇਠਾਂ ਦਿੱਤੇ ਟਿਊਟੋਰਿਅਲ ▼ ਬਾਰੇ ਗੱਲ ਕਰਦੇ ਹਨ
ਮੋਬਾਈਲ ਵੈੱਬਸਾਈਟ ਪੰਨੇ ਦੇ ਅਨੁਕੂਲ MP4 ਵੀਡੀਓ ਕਿਵੇਂ ਚਲਾਉਂਦੀ ਹੈ?ਕਿਰਪਾ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ▼
ਹੋਪ ਚੇਨ ਵੇਇਲਿਯਾਂਗ ਬਲੌਗ ( https://www.chenweiliang.com/ ) ਨੇ "ਵੈਬ ਪੇਜ HTML 5 ਇਮੇਜ ਅਡੈਪਟਿਵ ਸਕਰੀਨ img ਅਨੁਪਾਤਕ ਸਕੇਲਿੰਗ ਕੋਡ" ਸਾਂਝਾ ਕੀਤਾ, ਜੋ ਤੁਹਾਡੇ ਲਈ ਮਦਦਗਾਰ ਹੈ।
ਇਸ ਲੇਖ ਦਾ ਲਿੰਕ ਸਾਂਝਾ ਕਰਨ ਲਈ ਸੁਆਗਤ ਹੈ:https://www.chenweiliang.com/cwl-964.html
ਨਵੀਨਤਮ ਅਪਡੇਟਸ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਚੇਨ ਵੇਇਲਿਯਾਂਗ ਦੇ ਬਲੌਗ ਦੇ ਟੈਲੀਗ੍ਰਾਮ ਚੈਨਲ ਵਿੱਚ ਸੁਆਗਤ ਹੈ!
📚 ਇਸ ਗਾਈਡ ਵਿੱਚ ਬਹੁਤ ਵੱਡਾ ਮੁੱਲ ਹੈ, 🌟ਇਹ ਇੱਕ ਦੁਰਲੱਭ ਮੌਕਾ ਹੈ, ਇਸ ਨੂੰ ਨਾ ਗੁਆਓ! ⏰⌛💨
ਜੇ ਚੰਗਾ ਲੱਗੇ ਤਾਂ ਸ਼ੇਅਰ ਅਤੇ ਲਾਈਕ ਕਰੋ!
ਤੁਹਾਡੀ ਸ਼ੇਅਰਿੰਗ ਅਤੇ ਪਸੰਦ ਸਾਡੀ ਨਿਰੰਤਰ ਪ੍ਰੇਰਣਾ ਹਨ!