مقالې لارښود
د ګرځنده ځواب ویونکي CSS څنګه د مختلف حلونو سره سم مختلف @ میډیا سکرین ځواب ورکوونکي ترتیبونه ښیې؟
لاندې مقاله به د مختلف حلونو ټاکلو لپاره د سی ایس ایس کارولو څرنګوالی معرفي کړي او د تطبیق وړ چوکۍ ترلاسه کولو لپاره مختلف چوکۍ ترتیبونه وښیې.
اړمن ملګري کولی شي چې ورته مراجعه وکړي، هیله لرم چې د ټولو لپاره به ګټور وي.
د @میډیا او @میډیا سکرین چاپ کولو ویب پا pagesو ترمینځ توپیر
- که چیرې سی ایس ایس د چاپ کولو وسیله کې کارولو ته اړتیا ولري، @ میډیا وکاروئ، که نه، د @ میډیا سکرین وکاروئ.
- په هرصورت، دا اړینه نه ده چې ریښتیا وي. په حقیقت کې، که تاسو "اسکرین" د "چاپ" سره بدل کړئ او د @media print په توګه یې ولیکئ، نو 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 ډوله کول دي (قضاوت کول چې د براوزر چوکۍ لوی وي ، په مخ کې لوړ وي).
- دا د منطقي اړیکو له امله دی، د سی ایس ایس ډیبګ کولو @ میډیا قضاوت به د قضاوت د ناکامۍ لامل شي.
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 پراخه سکرین لپاره، یو بل سټایل تعریف کړئ، لکه د تطبیق وړ عرض او ثابت پلنوالی:
- @میډیا یوازې سکرین او (د وسیلې اړخ-تناسب: 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 دی، کوم چې د مختلف سکرینونو سره سم د مختلف @ میډیا سکرین ځواب ویونکي توضیحي مینځپانګې ښیې.
امید چن وییلینګ بلاګ ( https://www.chenweiliang.com/ ) شریک شوی "د موبایل تطابق CSS مختلف سکرینونه مختلف @ میډیا سکرین غبرګون ښیې" چې ستاسو لپاره ګټور دی.
د دې مقالې لینک شریکولو ته ښه راغلاست:https://www.chenweiliang.com/cwl-2074.html
د وروستي تازه معلوماتو ترلاسه کولو لپاره د چن ویلیانګ بلاګ ټیلیګرام چینل ته ښه راغلاست!
📚 دا لارښود لوی ارزښت لري، 🌟دا یو نادر فرصت دی، له لاسه مه ورکوئ! ⏰⌛💨
که مو خوښه شوه لایک او شریک کړئ!
ستاسو شریکول او خوښول زموږ دوامداره هڅونه ده!