Comment utiliser HTML5 pour implémenter le collage de sites Web dans les compétences du didacticiel Windows8_html5

Tout d'abord, jetons un coup d'œil à l'adhérence de Windows 8. L'application Metro dans Windows 8 peut très bien diviser l'écran comme indiqué ci-dessous

Permet aux utilisateurs de changer très facilement pendant l'utilisation. Le système comporte également des réglementations strictes en matière d’adhésion. Il y a deux écrans au maximum, un grand et un petit. Et la largeur du petit écran est fixée à 320 pixels.

Ainsi, lorsque l'utilisateur colle le site Web sur un petit écran, la page sera réduite par défaut. Comme indiqué ci-dessous :

Alors comment bien résoudre un tel problème ? Comment rendre l’affichage du site internet très convivial sur le petit écran de Windows 8 ? Ci-dessous j'ai un exemple simple

Comme le montre la figure, une page très simple et traditionnelle, comprenant une navigation, un contenu, etc. disposés horizontalement.

Il en va de même pour le code traditionnel

Accueil

Item3

>

Item4

Une telle page sera réduite une fois collée, comme indiqué ci-dessous :




Comment le modifier ? Dans une page traditionnelle comme celle-ci, il suffit d'écrire un CSS basé sur la fonctionnalité d'accrochage de Windows 8 pour que notre page puisse être mise en page et affichée avec une largeur de 320 pixels

Le code d'implémentation est le suivant : Ajoutez le code de style suivant à la page d'origine






Copiez le code

Le code est le suivant :

@media screen et (max-width : 320px) {

@-ms-viewport { width: 320px }

. nav {

remplissage : 5px 0px 5px 0px;

marge : 0px;

largeur : 100 % ; couleur d'arrière-plan : #fff; > largeur : 300px ; clair : les deux ;
marge : 0px 0px 1px 0px ;
couleur d'arrière-plan :
remplissage : 5px 0px 5px 0px ; 🎜> .dvItem {

> largeur : 95 % ;

hauteur : 600 px ; couleur d'arrière-plan : clair : }

.main; {

width: 320px;

margin: 0px auto 0px auto;
}
>

Il n'y a aucune différence entre la navigation en plein écran et la navigation traditionnelle.

La différence est que lorsqu'il est fixé à un petit écran, l'effet d'affichage est très évident comme indiqué ci-dessous.




Téléchargez cet exemple de code
/Files/risk/Index.rar