Мақала анықтамалығы
Мобильді жауап беретін CSS әртүрлі ажыратымдылықтарға сәйкес әртүрлі @media экранының жауапты орналасуларын қалай көрсетеді?
Келесі мақалада адаптивті енге қол жеткізу үшін әртүрлі ажыратымдылықтарды анықтау және әртүрлі ені орналасуларын көрсету үшін CSS қалай пайдалану керектігі қарастырылады.
Мұқтаж достар сілтеме жасай алады, бұл барлығына пайдалы болады деп үміттенемін.
@media және @media экран беттерін басып шығару арасындағы айырмашылық
- Егер css басып шығару құрылғысында қолданылуы керек болса, @media пайдаланыңыз, әйтпесе @media экранын пайдаланыңыз.
- Дегенмен, бұл міндетті түрде дұрыс емес.Шын мәнінде, егер сіз «экранды» «print» дегенмен ауыстырып, оны @media print деп жазсаңыз, онда CSS басып шығару құрылғысында қолданылуы мүмкін;
- Бірақ @media print жариялаған CSS тек басып шығару құрылғыларында жарамды екенін ескеріңіз.
1. DIVCSS шағын іс сипаттамасы
Алдымен ".abc" деп аталатын CSS DIV терезесін орнаттық, оның биіктігін 300 пиксельге орнатамыз және CSS шекарасын қара түске орнаттық;
- және параметрлер
margin:0 autoОрналасу ортада орналасқан және бұл екі стиль оңай қарау үшін алдын ала орнатылған.
Енді көрсету үшін браузерді қолмен сүйреп апарамыз, содан кейін қораптың ені қалай өзгеретінін байқаймыз:
- Браузердің ені 500 пиксельден аспайтын енге реттелгенде, қораптың еніне сәйкес 100 пиксель көрсетіледі;
- Браузердің ені 901 пиксельден аз етіп реттелгенде, 200px көрсететін жолақ еніне сәйкес «.abc» көрсетіледі;
- Браузер ені 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>Жоғарыда әртүрлі экрандарға сәйкес әр түрлі @media экранына жауап беретін егжей-тегжейлі мазмұнды көрсететін мобильді терминалдың адаптивті CSS болып табылады.
Hope Chen Weiliang блогы ( https://www.chenweiliang.com/ ) "Мобильдік адаптивті CSS әртүрлі экрандар @media экраны жауап беретін әртүрлі көрсетеді" бөлісті, бұл сізге пайдалы.
Осы мақаланың сілтемесін бөлісуге қош келдіңіз:https://www.chenweiliang.com/cwl-2074.html
Соңғы жаңартуларды алу үшін Чен Вэйлян блогының Telegram арнасына қош келдіңіз!
📚 Бұл нұсқаулықта үлкен құндылық бар, 🌟Бұл сирек мүмкіндік, оны жіберіп алмаңыз! ⏰⌛💨
Ұнаса лайк басып, бөлісіңіз!
Сіздің бөлісулеріңіз бен лайктарыңыз - біздің үздіксіз мотивациямыз!