ဆောင်းပါးလမ်းညွှန်
မိုဘိုင်းတုံ့ပြန်မှု CSS သည် မတူညီသော resolution အလိုက် မတူညီသော @media မျက်နှာပြင်တုံ့ပြန်မှု အပြင်အဆင်များကို မည်သို့ပြသသနည်း။
အောက်ပါဆောင်းပါးသည် မတူညီသော ကြည်လင်ပြတ်သားမှုများကို ဆုံးဖြတ်ရန်နှင့် လိုက်လျောညီထွေရှိသော အကျယ်ရရှိရန်အတွက် မတူညီသော width layout များကိုပြသရန် CSS ကိုအသုံးပြုပုံကို မိတ်ဆက်ပေးပါမည်။
လိုအပ်သော မိတ်ဆွေများ ညွှန်းပေးနိုင်ပါတယ် ၊ အားလုံးအတွက် အသုံးဝင်မယ်လို့ မျှော်လင့်ပါတယ်။
@media နှင့် @media မျက်နှာပြင်ပုံနှိပ်ခြင်း ဝဘ်စာမျက်နှာများကြား ကွာခြားချက်
- css ကို ပုံနှိပ်စက်တစ်ခုတွင် အသုံးပြုရန်လိုအပ်ပါက @media ကိုသုံးပါ၊ သို့မဟုတ်ပါက @media screen ကိုသုံးပါ။
- သို့သော်၊ ဤသည်မှာ သေချာပေါက်မှန်သည်မဟုတ်။ အမှန်တကယ်အားဖြင့် သင်သည် "စခရင်" ကို "ပုံနှိပ်ခြင်း" ဖြင့် အစားထိုးပြီး ၎င်းကို @media print အဖြစ်ရေးပါက၊ ထို့နောက် CSS ကို ပုံနှိပ်စက်တွင် အသုံးပြုနိုင်သည်။
- သို့သော် @media print မှကြေငြာထားသော css သည် ပုံနှိပ်စက်များတွင်သာ တရားဝင်ကြောင်း သတိပြုပါ။
1. DIVCSS အသေးစိပ်ဖော်ပြချက်
ပထမဦးစွာ ကျွန်ုပ်တို့သည် ".abc" ဟု အမည်ပေးထားသော CSS အကွက်တစ်ခုကို ၎င်း၏အမြင့် 300px သို့သတ်မှတ်ပြီး CSS ဘောင်ကို အနက်ရောင်အဖြစ် သတ်မှတ်သည်။
- နှင့် ဆက်တင်များ
margin:0 autoအပြင်အဆင်ကို ဗဟိုပြုထားပြီး ဤစတိုင်နှစ်မျိုးကို အလွယ်တကူကြည့်ရှုနိုင်ရန် ကြိုတင်သတ်မှတ်ထားသည်။
ကျွန်ုပ်တို့သည် အကျယ်ကိုပြသရန် ဘရောက်ဆာကို ကိုယ်တိုင်ဆွဲယူပြီးနောက် အကွက်၏ အကျယ်ကို မည်သို့ပြောင်းလဲသည်ကို လေ့လာကြည့်ပါ-
- ဘရောက်ဆာ၏ အကျယ်ကို 500px ထက်မပိုသော အကျယ်သို့ ချိန်ညှိသောအခါ၊ 100px သည် အကွက်၏ အကျယ်နှင့် ကိုက်ညီသော XNUMXpx ကို ပြသသည်။
- ဘရောင်ဇာ၏ အကျယ်ကို 901px ထက်နည်းအောင် ချိန်ညှိသောအခါ၊ ".abc" သည် 200px ပြသည့် အကွက်၏ အကျယ်နှင့် ကိုက်ညီသော ပြပေးပါသည်။
- ဘရောက်ဆာ အကျယ်ကို 1201px ထက် ပိုကြီးအောင် ချိန်ညှိသောအခါ၊ အကွက်အရာဝတ္တု၏ အကျယ်သည် 1200px ဖြစ်သည်;
- ၎င်းသည် 1200px ထက်နည်းသောအခါ၊ display width သည် 900px ဖြစ်သည်။
2၊ CSS မိုဘိုင်းလ်ဖုန်း မိုဘိုင်း terminal သပ္ပါဒကုဒ်
.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 ကို အကြီးမှအသေးသို့ စာရိုက်ခြင်းဖြစ်သည် (ဘရောက်ဆာအကျယ်ပိုကြီးလေ၊ အရှေ့ဘက်ပိုမြင့်လေဖြစ်သည်) သတိပြုသင့်သည်။
- ၎င်းသည် ယုတ္တိရှိသော ဆက်ဆံရေးကြောင့်၊ @media ၏ 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>မှတ်ချက်- စက်-ပုံ-အချိုး
- device-aspect-ratio ကို အသုံးဝင်သော ပိုင်ဆိုင်မှုတစ်ခုဖြစ်သည့် တိကျသော စခရင်ပုံစံ အချိုးများဖြင့် စက်ပစ္စည်းများနှင့် ကိုက်ညီရန် အသုံးပြုနိုင်သည်။
- ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့၏စာမျက်နှာသည် ပုံမှန်ဖန်သားပြင်များအတွက် ပုံစံတစ်ခုကို 4:3 အချိုးအစား သတ်မှတ်လိုပါသည်။
- ထို့နောက် 16:9 နှင့် 16:10 မြင်ကွင်းကျယ်အတွက်၊ လိုက်လျောညီထွေရှိသော အကျယ်နှင့် ပုံသေအကျယ်ကဲ့သို့ အခြားပုံစံကို သတ်မှတ်ပါ-
- @media တစ်ခုတည်းသော မျက်နှာပြင်နှင့် (device-aspect-ratio: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>အထက်ဖော်ပြပါ သည် မတူညီသော မျက်နှာပြင်များအလိုက် မတူညီသော @media မျက်နှာပြင် တုံ့ပြန်မှု အသေးစိတ် အကြောင်းအရာများကို ပြသပေးသည့် မိုဘိုင်းလ်ဖုန်း adaptive CSS ဖြစ်သည်။
မျှော်လင့်ခြင်း Chen Weiliang ဘလော့ဂ် ( https://www.chenweiliang.com/ ) သင့်အတွက် အထောက်အကူဖြစ်စေသော "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness" ကို မျှဝေထားပါသည်။
ဤဆောင်းပါး၏ link ကိုမျှဝေရန်ကြိုဆိုပါတယ်:https://www.chenweiliang.com/cwl-2074.html
နောက်ဆုံးထွက်မွမ်းမံမှုများကို ရယူရန် Chen Weiliang ၏ တယ်လီဂရမ်ချန်နယ်မှ ကြိုဆိုပါသည်။
📚 ဤလမ်းညွှန်တွင် တန်ဖိုးကြီးကြီးမားမားပါရှိသည်၊ 🌟ဒါက ရှားပါးအခွင့်အရေးပါ၊ လက်လွတ်မခံပါနဲ့။ ⏰⌛💨
ကြိုက်ရင် Share ပြီး Like လုပ်ပါ။
သင်၏မျှဝေခြင်းနှင့် လိုက်ခ်များသည် ကျွန်ုပ်တို့၏ စဉ်ဆက်မပြတ်လှုံ့ဆော်မှုဖြစ်သည်။