Rakstu katalogs
Kā mobilajām ierīcēm adaptīvais CSS parāda dažādus @media ekrāna adaptīvos izkārtojumus atbilstoši dažādām izšķirtspējām?
Nākamajā rakstā tiks parādīts, kā izmantot CSS, lai noteiktu dažādas izšķirtspējas un parādītu dažāda platuma izkārtojumus, lai sasniegtu adaptīvo platumu.
Draugi, kuriem tas ir nepieciešams, var atsaukties uz to, es ceru, ka tas būs noderīgs ikvienam.
Atšķirība starp @media un @media sietspiedes tīmekļa lapām
- Ja css ir jāizmanto drukas ierīcē, izmantojiet @media, pretējā gadījumā izmantojiet @media screen.
- Tomēr tas ne vienmēr ir taisnība. Faktiski, ja aizstājat "screen" ar "print" un ierakstāt to kā @media print, tad CSS var izmantot drukas ierīcē;
- Taču ņemiet vērā, ka @media print deklarētais css ir derīgs tikai drukas ierīcēs.
1. DIVCSS mazās lietas apraksts
Vispirms iestatījām DIV lodziņu CSS ar nosaukumu ".abc", iestatījām tā augstumu uz 300 pikseļiem un iestatījām CSS apmali uz melnu;
- un iestatījumi
margin:0 autoIzkārtojums ir centrēts, un šie divi stili ir iepriekš iestatīti ērtai skatīšanai.
Mēs manuāli velkam pārlūkprogrammu, lai parādītu platumu, un pēc tam novērojam, kā mainās lodziņa platums:
- Kad pārlūkprogrammas platums ir noregulēts uz platumu, kas nepārsniedz 500 pikseļus, tiek parādīts 100 pikseļi atbilstoši lodziņa platumam;
- Ja pārlūkprogrammas platums ir pielāgots mazākam par 901 pikseļiem, tiek parādīts “.abc”, kas atbilst lodziņa platumam, kas parāda 200 pikseļus;
- Ja pārlūkprogrammas platums ir pielāgots lielākam par 1201 pikseļiem, lodziņa objekta platums parāda 1200 pikseļus;
- Ja tas ir mazāks par 1200 pikseļiem, displeja platums ir 900 pikseļi.
2, CSS mobilā tālruņa mobilā termināļa adaptīvais kods
.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宽度 */- Jāatzīmē, ka CSS kodu secība ir CSS salikšana no liela uz mazu (spriežot, jo lielāks pārlūkprogrammas platums, jo augstāka priekšpuse).
- Tas ir loģiskās attiecības dēļ, @media spriedums par CSS atkļūdošanu izraisīs sprieduma neveiksmi.
3. HTML kods
<!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>Piezīme: ierīces malu attiecība
- Device-aspect-ratio var izmantot, lai pielāgotu ierīcēm ar noteiktu ekrāna malu attiecību, kas arī ir noderīgs īpašums.
- Piemēram, mūsu lapa vēlas definēt stilu parastajiem ekrāniem ar malu attiecību 4:3.
- Pēc tam 16:9 un 16:10 platekrānam definējiet citu stilu, piemēram, adaptīvo platumu un fiksēto platumu:
- @media tikai ekrāns un (ierīces malu attiecība: 4/3)
4. Savietojams ar lielāko pārlūkprogrammu HTML+CSS+JS pirmkodu
<!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>Iepriekš minētais ir mobilā termināļa adaptīvais CSS, kas atbilstoši dažādiem ekrāniem parāda dažādu @media ekrāna reaģējošu detalizētu saturu.
Hope Chen Weiliang emuārs ( https://www.chenweiliang.com/ ) kopīgoja "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsive", kas jums ir noderīgs.
Laipni lūdzam kopīgot šī raksta saiti:https://www.chenweiliang.com/cwl-2074.html
Laipni lūdzam Chen Weiliang emuāra Telegram kanālā, lai saņemtu jaunākos atjauninājumus!
📚 Šajā rokasgrāmatā ir milzīga vērtība, 🌟Šī ir reta iespēja, nepalaidiet to garām! ⏰⌛💨
Dalies un patīk, ja patīk!
Jūsu kopīgošana un atzīmes Patīk ir mūsu nepārtraukta motivācija!