Artikelverzeichnis
Wie zeigt responsives CSS für Mobilgeräte unterschiedliche @media-Bildschirm-Responsive-Layouts gemäß unterschiedlichen Auflösungen an?
Der folgende Artikel stellt vor, wie man CSS verwendet, um unterschiedliche Auflösungen zu bestimmen und unterschiedliche Breitenlayouts anzuzeigen, um eine adaptive Breite zu erreichen.
Freunde in Not können sich darauf beziehen, ich hoffe, es wird für alle hilfreich sein.
Der Unterschied zwischen @media- und @media-Siebdruck-Webseiten
- Wenn das CSS in einem Druckgerät verwendet werden muss, verwenden Sie @media, andernfalls verwenden Sie @media screen.
- Dies ist jedoch nicht unbedingt richtig, denn wenn Sie „screen“ durch „print“ ersetzen und es als @media print schreiben, kann das CSS auf dem Druckgerät verwendet werden;
- Beachten Sie jedoch, dass das von @media print deklarierte CSS nur auf Druckgeräten gültig ist.
1. Beschreibung des kleinen DIVCSS-Gehäuses
Wir legen zuerst ein DIV-Box-CSS mit dem Namen ".abc" fest, setzen seine Höhe auf 300 Pixel und setzen den CSS-Rand auf Schwarz.
- und Einstellungen
margin:0 autoDas Layout ist zentriert und diese beiden Stile sind für eine einfache Anzeige voreingestellt.
Wir ziehen den Browser manuell, um die Breite anzuzeigen, und beobachten dann, wie sich die Breite der Box ändert:
- Wenn die Breite des Browsers auf eine Breite von nicht mehr als 500 Pixel eingestellt wird, werden 100 Pixel entsprechend der Breite des Felds angezeigt;
- Wenn die Breite des Browsers auf weniger als 901 Pixel eingestellt wird, wird „.abc“ entsprechend der Breite des Felds angezeigt, das 200 Pixel anzeigt;
- Wenn die Browserbreite auf mehr als 1201 Pixel eingestellt wird, zeigt die Breite des Box-Objekts 1200 Pixel an;
- Wenn es weniger als 1200 Pixel beträgt, beträgt die Anzeigebreite 900 Pixel.
2, adaptiver Code des CSS-Mobiltelefon-Mobilgeräts
.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宽度 */- Es sollte beachtet werden, dass die CSS-Codereihenfolge CSS von groß nach klein setzt (je größer die Browserbreite, desto höher die Front).
- Dies liegt an der logischen Beziehung, dass die Beurteilung von @media zum CSS-Debugging dazu führt, dass die Beurteilung fehlschlägt.
3. HTML-Code
<!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>Hinweis: Geräte-Seitenverhältnis
- device-aspect-ratio kann verwendet werden, um Geräte mit bestimmten Bildschirm-Seitenverhältnissen anzupassen, was ebenfalls eine nützliche Eigenschaft ist.
- Beispielsweise möchte unsere Seite einen Stil für normale Bildschirme mit einem Seitenverhältnis von 4:3 definieren.
- Definieren Sie dann für 16:9- und 16:10-Breitbild einen anderen Stil, z. B. adaptive Breite und feste Breite:
- @media only screen und (device-aspect-ratio:4/3)
4. Kompatibel mit HTML+CSS+JS-Quellcode der wichtigsten Browser
<!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>Das Obige ist das adaptive CSS für Mobiltelefone, das je nach Bildschirm unterschiedliche, auf @media-Bildschirme ansprechende detaillierte Inhalte anzeigt.
Hoffnung Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Shared „Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness“, was für Sie hilfreich ist.
Willkommen, um den Link dieses Artikels zu teilen:https://www.chenweiliang.com/cwl-2074.html