Commentaire: L'éditeur de cet article vous présentera comment utiliser HTML5 pour obtenir la prise en charge des sites Web dans Windows 8. Si vous en avez besoin, veuillez y consulter
Tout d'abord, apprenons la prise en charge de Windows 8. Les applications de métro dans Windows 8 peuvent très bien diviser l'écran. La figure suivante
Cela permet aux utilisateurs de changer très facilement pendant l'utilisation. Le système a également des réglementations rigides sur l'attachement. Au plus deux écrans, l'un est grand et l'autre est petit. Et la largeur du petit écran est fixée à 320 pixels.
Ainsi, lorsque les utilisateurs publient le site Web dans un petit écran, la page est réduite en proportion par défaut. Comme indiqué dans la figure ci-dessous:
Alors, comment pouvons-nous très bien résoudre un tel problème? Qu'en est-il de faire en sorte que le site Web montre un effet très amical sous le petit écran de Windows 8? Ci-dessous, j'ai un exemple simple
Comme le montre l'image, une page très simple et traditionnelle, y compris la navigation, le contenu, etc.
Et il en va de même pour le code traditionnel
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<Title> </Title>
<style>
.nav {
rembourrage: 5px 0px 5px 0px;
marge: 0px;
Largeur: 100%;
Type de style liste: aucun;
Color d'arrière-plan: # CDDCD6;
hauteur: 28px;
}
.nav li {
marge: 0px 1px 0px 0px;
flottant: à gauche;
Color d'arrière-plan: # 0094FF;
rembourrage: 5px 10px 5px 10px;
}
.dvitem {
Largeur: 100%;
hauteur: 400px;
Color d'arrière-plan: # b6ff00;
Clear: les deux;
}
.principal {
Largeur: 960px;
marge: 0px auto 0px auto;
}
</ style>
</ head>
<body>
<div>
<ul>
<li> Home </li>
<li> Élément1 </li>
<li> item2 </li>
<li> Article3 </li>
<li> Article4 </li>
</ul>
<div>
</div>
</div>
</docy>
</html>
Une telle page est réduite dans l'effet de collage comme indiqué sur la figure:
Comment le modifier? Dans des pages traditionnelles comme celle-ci, nous n'avons qu'à écrire un CSS en fonction des caractéristiques de relais de Windows 8. Laissez notre page être disposée et affichée à une largeur de 320 pixels.
Le code d'implémentation est le suivant: Ajoutez le code de style suivant à la page d'origine
Écran @media et (max-largeur: 320px) {
@ -ms-diewport {width: 320px; }
.nav {
rembourrage: 5px 0px 5px 0px;
marge: 0px;
Largeur: 100%; Color d'arrière-plan: #FFF;
}
.nav li {
Largeur: 300px;
Clear: les deux;
marge: 0px 0px 1px 0px;
Color d'arrière-plan: # 0094FF;
rembourrage: 5px 0px 5px 0px;
}
.dvitem {
Largeur: 95%;
Hauteur: 600px;
Color d'arrière-plan: # FF00A4;
Clear: les deux;
}
.principal {
Largeur: 320px;
marge: 0px auto 0px auto;
}
}
Il n'y a pas de différence entre la navigation à écran complet et la navigation traditionnelle.
La différence est que l'effet d'affichage est évident lorsque vous le collez à un petit écran comme indiqué dans la figure suivante.
Cet exemple de téléchargement de code / fichiers / risque / index.rar