Kommentar: Der Herausgeber dieses Artikels wird Ihnen vorstellen
Lassen Sie uns zunächst die Unterstützung von Windows 8. Metro -Anwendungen in Windows 8 kennenlernen, die den Bildschirm sehr gut teilen können. Die folgende Abbildung
Auf diese Weise können Benutzer während des Gebrauchs sehr einfach wechseln. Das System hat auch starre Vorschriften für die Bindung. In den meisten zwei Bildschirmen ist einer groß und der andere klein. Und die Breite des kleinen Bildschirms ist auf 320 Pixel fixiert.
Wenn Benutzer die Website in einem kleinen Bildschirm veröffentlichen, wird die Seite standardmäßig proportional reduziert. Wie in der Abbildung unten gezeigt:
Wie können wir ein solches Problem sehr gut lösen? Was ist, wenn die Website einen sehr freundlichen Effekt unter dem kleinen Bildschirm von Windows 8 zeigt? Unten habe ich ein einfaches Beispiel
Wie im Bild gezeigt, eine sehr einfache und traditionelle Seite, einschließlich horizontal angeordneter Navigation, Inhalt usw.
Und das gleiche gilt für traditionellen Code
<! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<title> </title>
<Styles>
.nav {
Polsterung: 5px 0px 5px 0px;
Rand: 0px;
Breite: 100%;
Typ-Typ-Typ: Keine;
Hintergrundfarbe: #CDDCD6;
Höhe: 28px;
}
.nav li {
Rand: 0px 1px 0px 0px;
float: links;
Hintergrundfarbe: #0094ff;
Polsterung: 5px 10px 5px 10px;
}
.dvitem {
Breite: 100%;
Höhe: 400px;
Hintergrundfarbe: #B6ff00;
klar: beides;
}
.hauptsächlich {
Breite: 960px;
Rand: 0px Auto 0px Auto;
}
</style>
</head>
<body>
<div>
<ul>
<li> Home </li>
<li> item1 </li>
<li> item2 </li>
<li> Artikel3 </li>
<li> item4 </li>
</ul>
<div>
</div>
</div>
</body>
</html>
Eine solche Seite wird im Sticking -Effekt reduziert, wie in der Abbildung gezeigt:
Wie modifiziere ich es? Auf traditionellen Seiten wie diesen müssen wir nur ein CSS basierend auf den Relaiseigenschaften von Windows 8 schreiben. Lassen Sie unsere Seite in einer Breite von 320 Pixel angelegt und angezeigt werden.
Der Implementierungscode lautet wie folgt: Fügen Sie der Originalseite den folgenden Stilcode hinzu
@media Bildschirm und (max-Width: 320px) {
@-ms-viewport {width: 320px; }
.nav {
Polsterung: 5px 0px 5px 0px;
Rand: 0px;
Breite: 100%; Hintergrundfarbe: #fff;
}
.nav li {
Breite: 300px;
klar: beides;
Rand: 0px 0px 1px 0px;
Hintergrundfarbe: #0094ff;
Polsterung: 5px 0px 5px 0px;
}
.dvitem {
Breite: 95%;
Höhe: 600px;
Hintergrundfarbe: #ff00a4;
klar: beides;
}
.hauptsächlich {
Breite: 320px;
Rand: 0px Auto 0px Auto;
}
}
Es gibt keinen Unterschied zwischen Vollbild-Browser und herkömmlichem Surfen.
Der Unterschied besteht darin, dass der Anzeigeeffekt offensichtlich ist, wenn Sie ihn auf einen kleinen Bildschirm kleben, wie in der folgenden Abbildung gezeigt.
Dieser Beispielcode -Download/Dateien/Risiko/Index.rar