آرٽيڪل ڊاريڪٽري
موبائل جوابي سي ايس ايس ڪيئن مختلف قراردادن جي مطابق مختلف @ ميڊيا اسڪرين جوابي ترتيب ڏيکاري ٿو؟
هيٺ ڏنل آرٽيڪل متعارف ڪرايو ويندو ته ڪيئن استعمال ڪجي CSS مختلف قراردادن کي طئي ڪرڻ لاءِ ۽ مختلف چوٿون ترتيبون ڊسپلي ڪرڻ لاءِ موافقت جي چوٽي حاصل ڪرڻ لاءِ.
ضرورت مند دوست هن کي حوالي ڪري سگهن ٿا، اميد اٿم ته اهو سڀني لاء مددگار ثابت ٿيندو.
@media ۽ @media اسڪرين پرنٽنگ ويب صفحن جي وچ ۾ فرق
- جيڪڏهن سي ايس ايس کي پرنٽنگ ڊوائيس ۾ استعمال ڪرڻ جي ضرورت آهي، استعمال ڪريو @media، ٻي صورت ۾، @media اسڪرين استعمال ڪريو.
- بهرحال، اهو ضروري ناهي ته صحيح هجي. حقيقت ۾، جيڪڏهن توهان "اسڪرين" کي "پرنٽ" سان مٽايو ۽ ان کي @media print طور لکو، ته پوءِ CSS کي پرنٽنگ ڊيوائس تي استعمال ڪري سگهجي ٿو.
- پر نوٽ ڪريو ته @media پرنٽ پاران اعلان ڪيل سي ايس ايس صرف پرنٽنگ ڊوائيسز تي صحيح آهي.
1. DIVCSS ننڍي ڪيس جي وضاحت
اسان پهريون ڀيرو ".abc" نالي هڪ DIV باڪس CSS سيٽ ڪيو، ان جي اوچائي 300px تي مقرر ڪيو، ۽ سي ايس ايس جي سرحد کي ڪارو ڪرڻ لاء مقرر ڪيو؛
- ۽ سيٽنگون
margin:0 autoترتيب مرڪزي آهي، ۽ اهي ٻه انداز آسان ڏسڻ لاء اڳ ۾ مقرر ڪيا ويا آهن.
اسان دستي طور تي برائوزر کي ڇڪيو ته چوٽي کي ڏيکاري، ۽ پوء ڏسو ته ڪيئن دٻي جي چوٽي تبديل ٿي:
- جڏهن برائوزر جي چوٽي کي 500px کان وڌيڪ نه جي چوٽي تي ترتيب ڏني وئي آهي، 100px دٻي جي چوٽي جي مطابق ڏيکاريل آهي؛
- جڏهن برائوزر جي ويڪر کي 901px کان گھٽ ڪرڻ لاءِ ترتيب ڏنو وڃي ٿو، ته ".abc" ڏيکاريو ويندو دٻي جي ويڪر جي مطابق، جيڪو ڏيکاري ٿو 200px؛
- جڏهن برائوزر جي چوٽي کي 1201px کان وڌيڪ ڪرڻ لاءِ ترتيب ڏني وئي آهي، باڪس اعتراض جي چوٽي ڏيکاري ٿي 1200px؛
- جڏهن اهو 1200px کان گهٽ آهي، ڊسپلي جي ويڪر 900px آهي.
2، CSS موبائل فون موبائل ٽرمينل adaptive ڪوڊ
.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宽度 */- اهو ياد رکڻ گهرجي ته سي ايس ايس ڪوڊ آرڊر وڏي کان ننڍي تائين سي ايس ايس کي ٽائيپ ڪرڻ آهي (جڏهن ته براؤزر جي چوٽي وڏي هوندي، اوترو سامهون).
- اهو منطقي تعلق جي ڪري آهي، @media جي سي ايس ايس ڊيبگنگ جو فيصلو ناڪام ٿيڻ جو سبب بڻجندو.
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>نوٽ: ڊيوائس-پاس-تناسب
- device-aspect-ratio استعمال ڪري سگھجي ٿو ڊوائيسز کي مخصوص اسڪرين اسپيڪٽ ريشوز سان فٽ ڪرڻ لاءِ، جيڪو پڻ ھڪ مفيد ملڪيت آھي.
- مثال طور، اسان جو صفحو 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>مٿيون موبائل ٽرمينل adaptive CSS آهي، جيڪو ڏيکاري ٿو مختلف @media اسڪرين جوابي تفصيلي مواد مختلف اسڪرينن جي مطابق.
اميد چن ويلانگ بلاگ ( https://www.chenweiliang.com/ ) شيئر ڪيو ويو ”موبائيل اڊاپٽيو CSS مختلف اسڪرين ڊسپلي مختلف @media اسڪرين ريسپانسوينس“ جيڪو توهان لاءِ مددگار آهي.
هن آرٽيڪل جي لنڪ کي حصيداري ڪرڻ لاء ڀليڪار:https://www.chenweiliang.com/cwl-2074.html
تازن تازه ڪاريون حاصل ڪرڻ لاءِ Chen Weiliang جي بلاگ جي ٽيليگرام چينل تي ڀليڪار!
📚 هي گائيڊ وڏي قيمت تي مشتمل آهي، 🌟 هي هڪ نادر موقعو آهي، ان کي نه وڃايو! ⏰⌛💨
پسند اچي ته شيئر ڪريو ۽ پسند ڪريو!
توهان جي حصيداري ۽ پسند اسان جي مسلسل حوصلا آهن!