ਮੋਬਾਈਲ ਜਵਾਬਦੇਹ CSS ਵੱਖ-ਵੱਖ ਰੈਜ਼ੋਲੂਸ਼ਨਾਂ ਦੇ ਅਨੁਸਾਰ ਵੱਖ-ਵੱਖ @ਮੀਡੀਆ ਸਕ੍ਰੀਨ ਜਵਾਬਦੇਹ ਲੇਆਉਟ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ?
ਹੇਠਾਂ ਦਿੱਤਾ ਲੇਖ ਵੱਖ-ਵੱਖ ਰੈਜ਼ੋਲਿਊਸ਼ਨਾਂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ CSS ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨਾ ਹੈ ਅਤੇ ਅਨੁਕੂਲ ਚੌੜਾਈ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਵੱਖ-ਵੱਖ ਚੌੜਾਈ ਲੇਆਉਟ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗਾ।
ਲੋੜਵੰਦ ਦੋਸਤ ਇਸ ਦਾ ਹਵਾਲਾ ਦੇ ਸਕਦੇ ਹਨ, ਮੈਨੂੰ ਉਮੀਦ ਹੈ ਕਿ ਇਹ ਸਾਰਿਆਂ ਲਈ ਮਦਦਗਾਰ ਹੋਵੇਗਾ.
@media ਅਤੇ @media ਸਕਰੀਨ ਪ੍ਰਿੰਟਿੰਗ ਵੈੱਬ ਪੰਨਿਆਂ ਵਿੱਚ ਅੰਤਰ
- ਜੇਕਰ css ਨੂੰ ਪ੍ਰਿੰਟਿੰਗ ਡਿਵਾਈਸ ਵਿੱਚ ਵਰਤਣ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ @media ਦੀ ਵਰਤੋਂ ਕਰੋ, ਨਹੀਂ ਤਾਂ @media ਸਕਰੀਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਹਾਲਾਂਕਿ, ਇਹ ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ ਸੱਚ ਨਹੀਂ ਹੈ ਅਸਲ ਵਿੱਚ, ਜੇਕਰ ਤੁਸੀਂ "ਸਕ੍ਰੀਨ" ਨੂੰ "ਪ੍ਰਿੰਟ" ਨਾਲ ਬਦਲਦੇ ਹੋ ਅਤੇ ਇਸਨੂੰ @ ਮੀਡੀਆ ਪ੍ਰਿੰਟ ਦੇ ਰੂਪ ਵਿੱਚ ਲਿਖਦੇ ਹੋ, ਤਾਂ CSS ਨੂੰ ਪ੍ਰਿੰਟਿੰਗ ਡਿਵਾਈਸ ਤੇ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ;
- ਪਰ ਨੋਟ ਕਰੋ ਕਿ @ਮੀਡੀਆ ਪ੍ਰਿੰਟ ਦੁਆਰਾ ਘੋਸ਼ਿਤ css ਕੇਵਲ ਪ੍ਰਿੰਟਿੰਗ ਡਿਵਾਈਸਾਂ 'ਤੇ ਵੈਧ ਹੈ।
1. DIVCSS ਛੋਟਾ ਕੇਸ ਵੇਰਵਾ
ਅਸੀਂ ਪਹਿਲਾਂ ".abc" ਨਾਮ ਦਾ ਇੱਕ DIV ਬਾਕਸ CSS ਸੈੱਟ ਕੀਤਾ, ਇਸਦੀ ਉਚਾਈ ਨੂੰ 300px ਤੇ ਸੈਟ ਕੀਤਾ, ਅਤੇ CSS ਬਾਰਡਰ ਨੂੰ ਕਾਲੇ ਤੇ ਸੈਟ ਕੀਤਾ;
- ਅਤੇ ਸੈਟਿੰਗਾਂ
margin:0 autoਲੇਆਉਟ ਕੇਂਦਰਿਤ ਹੈ, ਅਤੇ ਇਹ ਦੋ ਸਟਾਈਲ ਆਸਾਨ ਦੇਖਣ ਲਈ ਪਹਿਲਾਂ ਤੋਂ ਸੈੱਟ ਹਨ।
ਅਸੀਂ ਚੌੜਾਈ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਹੱਥੀਂ ਖਿੱਚਦੇ ਹਾਂ, ਅਤੇ ਫਿਰ ਦੇਖਦੇ ਹਾਂ ਕਿ ਬਾਕਸ ਦੀ ਚੌੜਾਈ ਕਿਵੇਂ ਬਦਲਦੀ ਹੈ:
- ਜਦੋਂ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਚੌੜਾਈ ਨੂੰ 500px ਤੋਂ ਵੱਧ ਦੀ ਚੌੜਾਈ ਵਿੱਚ ਐਡਜਸਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਬਾਕਸ ਦੀ ਚੌੜਾਈ ਦੇ ਅਨੁਸਾਰੀ 100px ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ;
- ਜਦੋਂ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਚੌੜਾਈ ਨੂੰ 901px ਤੋਂ ਘੱਟ ਕਰਨ ਲਈ ਐਡਜਸਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ".abc" ਬਾਕਸ ਦੀ ਚੌੜਾਈ ਦੇ ਅਨੁਸਾਰ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ, ਜੋ ਕਿ 200px ਦਿਖਾਉਂਦਾ ਹੈ;
- ਜਦੋਂ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਚੌੜਾਈ 1201px ਤੋਂ ਵੱਧ ਹੋਣ ਲਈ ਐਡਜਸਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਬਾਕਸ ਆਬਜੈਕਟ ਦੀ ਚੌੜਾਈ 1200px ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ;
- ਜਦੋਂ ਇਹ 1200px ਤੋਂ ਘੱਟ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਡਿਸਪਲੇ ਦੀ ਚੌੜਾਈ 900px ਹੁੰਦੀ ਹੈ।
2, CSS ਮੋਬਾਈਲ ਫ਼ੋਨ ਮੋਬਾਈਲ ਟਰਮੀਨਲ ਅਡੈਪਟਿਵ ਕੋਡ
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- ਇਹ ਨੋਟ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ CSS ਕੋਡ ਆਰਡਰ CSS ਨੂੰ ਵੱਡੇ ਤੋਂ ਛੋਟੇ ਤੱਕ ਟਾਈਪ ਕਰ ਰਿਹਾ ਹੈ (ਇਹ ਨਿਰਣਾ ਕਰਨਾ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਚੌੜਾਈ ਜਿੰਨੀ ਵੱਡੀ ਹੋਵੇਗੀ, ਸਾਹਮਣੇ ਓਨਾ ਹੀ ਉੱਚਾ ਹੋਵੇਗਾ)।
- ਇਹ ਲਾਜ਼ੀਕਲ ਸਬੰਧਾਂ ਦੇ ਕਾਰਨ ਹੈ, CSS ਡੀਬਗਿੰਗ ਦੇ @ਮੀਡੀਆ ਦੇ ਨਿਰਣੇ ਨਾਲ ਨਿਰਣਾ ਫੇਲ ਹੋ ਜਾਵੇਗਾ।
3. HTML ਕੋਡ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>ਨੋਟ: ਡਿਵਾਈਸ-ਪਹਿਲੂ-ਅਨੁਪਾਤ
- ਡਿਵਾਈਸ-ਪਹਿਲੂ-ਅਨੁਪਾਤ ਦੀ ਵਰਤੋਂ ਖਾਸ ਸਕ੍ਰੀਨ ਆਕਾਰ ਅਨੁਪਾਤ ਵਾਲੇ ਡਿਵਾਈਸਾਂ ਨੂੰ ਫਿੱਟ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ, ਜੋ ਕਿ ਇੱਕ ਲਾਭਦਾਇਕ ਵਿਸ਼ੇਸ਼ਤਾ ਵੀ ਹੈ।
- ਉਦਾਹਰਨ ਲਈ, ਸਾਡਾ ਪੰਨਾ ਸਾਧਾਰਨ ਸਕ੍ਰੀਨਾਂ ਲਈ 4:3 ਦੇ ਆਸਪੈਕਟ ਰੇਸ਼ੋ ਵਾਲੀ ਸ਼ੈਲੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ਚਾਹੁੰਦਾ ਹੈ।
- ਫਿਰ 16:9 ਅਤੇ 16:10 ਵਾਈਡਸਕ੍ਰੀਨ ਲਈ, ਕੋਈ ਹੋਰ ਸ਼ੈਲੀ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ, ਜਿਵੇਂ ਕਿ ਅਨੁਕੂਲ ਚੌੜਾਈ ਅਤੇ ਸਥਿਰ ਚੌੜਾਈ:
- @media ਕੇਵਲ ਸਕ੍ਰੀਨ ਅਤੇ (ਡਿਵਾਈਸ-ਪਹਿਲੂ-ਅਨੁਪਾਤ: 4/3)
4. ਪ੍ਰਮੁੱਖ ਬ੍ਰਾਉਜ਼ਰ HTML+CSS+JS ਸਰੋਤ ਕੋਡ ਨਾਲ ਅਨੁਕੂਲ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>ਉਪਰੋਕਤ ਮੋਬਾਈਲ ਟਰਮੀਨਲ ਅਡੈਪਟਿਵ CSS ਹੈ, ਜੋ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਦੇ ਅਨੁਸਾਰ ਵੱਖ-ਵੱਖ @media ਸਕ੍ਰੀਨ ਜਵਾਬਦੇਹ ਵਿਸਤ੍ਰਿਤ ਸਮੱਗਰੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ।
ਹੋਪ ਚੇਨ ਵੇਇਲਿਯਾਂਗ ਬਲੌਗ ( https://www.chenweiliang.com/ ) ਸਾਂਝਾ ਕੀਤਾ "ਮੋਬਾਈਲ ਅਡੈਪਟਿਵ CSS ਵੱਖ-ਵੱਖ ਸਕਰੀਨਾਂ ਡਿਸਪਲੇ ਵੱਖਰੀ @ਮੀਡੀਆ ਸਕ੍ਰੀਨ ਜਵਾਬਦੇਹੀ", ਜੋ ਤੁਹਾਡੇ ਲਈ ਮਦਦਗਾਰ ਹੈ।
ਇਸ ਲੇਖ ਦਾ ਲਿੰਕ ਸਾਂਝਾ ਕਰਨ ਲਈ ਸੁਆਗਤ ਹੈ:https://www.chenweiliang.com/cwl-2074.html
ਨਵੀਨਤਮ ਅਪਡੇਟਸ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਚੇਨ ਵੇਇਲਿਯਾਂਗ ਦੇ ਬਲੌਗ ਦੇ ਟੈਲੀਗ੍ਰਾਮ ਚੈਨਲ ਵਿੱਚ ਸੁਆਗਤ ਹੈ!
📚 ਇਸ ਗਾਈਡ ਵਿੱਚ ਬਹੁਤ ਵੱਡਾ ਮੁੱਲ ਹੈ, 🌟ਇਹ ਇੱਕ ਦੁਰਲੱਭ ਮੌਕਾ ਹੈ, ਇਸ ਨੂੰ ਨਾ ਗੁਆਓ! ⏰⌛💨
ਜੇ ਚੰਗਾ ਲੱਗੇ ਤਾਂ ਸ਼ੇਅਰ ਅਤੇ ਲਾਈਕ ਕਰੋ!
ਤੁਹਾਡੀ ਸ਼ੇਅਰਿੰਗ ਅਤੇ ਪਸੰਦ ਸਾਡੀ ਨਿਰੰਤਰ ਪ੍ਰੇਰਣਾ ਹਨ!