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

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

WBOY

Libérer： 2016-05-16 15:49:40

original

1614 Les gens l'ont consulté

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

Copiez le code

Le code est le suivant :

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

Étiquettes associées：

html5

source：php.cn

Article précédent：HTML5

Article suivant：Le seuil inter-domaines de l'API de communication HTML5 ne sera plus élevé, la transmission de données n'est plus un rêve_html5 compétences du didacticiel

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur