Article Directory
Мобилдик жооп берүүчү CSS ар кандай токтомдорго ылайык ар кандай @media экранынын жооп берүүчү макеттерин кантип көрсөтөт?
Төмөнкү макалада ар кандай резолюцияларды аныктоо жана адаптацияланган кеңдикке жетүү үчүн ар кандай тууралык схемаларын көрсөтүү үчүн CSSти кантип колдонуу керектиги көрсөтүлөт.
Муктаж болгон достор кайрылса болот, баарына пайдалуу болот деп ишенем.
@media менен @media экрандуу басып чыгаруу веб баракчаларынын ортосундагы айырма
- Эгерде css басып чыгаруучу түзүлүштө колдонулушу керек болсо, @media колдонуңуз, болбосо @media экранын колдонуңуз.
- Бирок, бул сөзсүз түрдө туура эмес.Чындыгында, эгер сиз "экранды" "print" менен алмаштырып, @media print деп жазсаңыз, анда CSS басып чыгаруу түзүлүшүндө колдонулушу мүмкүн;
- Бирок @media print жарыялаган css басып чыгаруу түзмөктөрүндө гана жарактуу экенин эске алыңыз.
1. DIVCSS кичинекей иштин сүрөттөлүшү
Биз алгач ".abc" деп аталган CSS DIV кутусун орнотуп, анын бийиктигин 300px кылып, CSS чектерин кара кылып койдук;
- жана орнотуулар
margin:0 autoМакет борборлоштурулган жана бул эки стиль оңой көрүү үчүн алдын ала коюлган.
Биз туурасын көрсөтүү үчүн браузерди кол менен сүйрөп, андан кийин кутучанын туурасы кандай өзгөрөрүн байкайбыз:
- Браузердин туурасы 500px ашпаган туурага туураланганда, кутучанын туурасына ылайыктуу 100px көрсөтүлөт;
- Браузердин туурасы 901 пикселден аз кылып туураланганда, кутучанын туурасына ылайыктуу ".abc" көрсөтүлөт, ал 200px көрсөтөт;
- Браузердин туурасы 1201 пикселден чоңураак кылып туураланганда, куту объектинин туурасы 1200 пикселди көрсөтөт;
- Ал 1200 пикселден аз болгондо, дисплей туурасы 900 пиксель болот.
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-ти чоңдон кичинеге чейин терет (серепчинин кеңдиги канчалык чоң болсо, алдыңкы жагы ошончолук жогору болот).
- Бул логикалык байланыштан улам, @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>Эскертүү: түзмөк-аспект-катышы
- түзмөк-аспект-катышы белгилүү бир экрандын пропорциялары бар түзмөктөрдү тууралоо үчүн колдонулушу мүмкүн, бул да пайдалуу касиет.
- Мисалы, биздин баракча 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 экранына жооп берүүчү деталдуу мазмунду көрсөтөт.
Hope Chen Weiliang блогу ( https://www.chenweiliang.com/ ) "Мобилдик Адаптивдүү CSS ар кандай экрандар ар кандай @media экраны жооп берет" деп бөлүштү, бул сизге пайдалуу.
Бул макаланын шилтемесин бөлүшүүгө кош келиңиз:https://www.chenweiliang.com/cwl-2074.html
Акыркы жаңылыктарды алуу үчүн Чен Вейляндын блогунун Telegram каналына кош келиңиз!
📚 Бул колдонмо чоң баалуулуктарды камтыйт, 🌟Бул сейрек кездешүүчү мүмкүнчүлүк, аны өткөрүп жибербеңиз! ⏰⌛💨
Бөлүшүп, жакса лайк!
Сиздин бөлүшүүңүз жана лайктарыңыз биздин үзгүлтүксүз мотивациябыз!