Comment créer une conception Web réactive H5-Tutoriel H5-php.cn

Comment créer une conception Web réactive H5

php中世界最好的语言

Libérer： 2018-01-11 09:56:18

original

3887 Les gens l'ont consulté

Cette fois, je vais vous montrer comment créer un web design réactif H5. Quelles sont les précautions pour un web design réactif H5. Voici des cas pratiques, jetons un coup d'oeil.

Cet article présente la mise en œuvre de la conception Web réactive (adaptative) HTML5 et le partage avec tout le monde :

Étape 1 : Ajoutez une ligne de balises méta de fenêtre à l'en-tête. du code de la page Web.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Copier après la connexion

viewport est la largeur et la hauteur par défaut de la page Web. La ligne de code ci-dessus signifie : la largeur de la page Web est égale à. la largeur de l'écran par défaut (width=device-width), original Le rapport de mise à l'échelle (initial-scale=1) est de 1,0, c'est-à-dire que la taille initiale de la page Web occupe 100 % de la surface de l'écran.

Tous les principaux navigateurs prennent en charge ce paramètre, y compris IE9. Pour ces anciens navigateurs (principalement IE6, 7, 8), vous devez utiliser css3-mediaqueries.js

<!--[if lt IE 9]> 
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->

Copier après la connexion

Étape 2 : (Remarque) N'utilisez pas la largeur absolue, la taille de la police

width:auto; / width:XX%;

Copier après la connexion

Étape 3 : (Remarque) Taille de la police

La taille de la police est 100 % de la taille par défaut de la page, qui est de 16 pixels

N'utilisez pas la taille absolue "PX" pour les polices, utilisez la taille relative Taille "REM"

Étape 4 : Disposition du flux

La signification de "flow" layout" c'est que chaque zone Les positions des blocs sont flottantes, non fixes

L'avantage est que si la largeur est trop petite pour contenir deux éléments, l'élément suivant défilera automatiquement vers le bas de l'élément précédent et ne sera pas horizontal Direction débordement (débordement) évite l'apparition de barres de défilement horizontales

Étape 5 : Choisir de charger CSS

Le cœur du "web design adaptatif" est l'introduction du module CSS3 Media Query. Détectez automatiquement la largeur de l'écran, puis chargez le fichier CSS correspondant

<style type="text/css"> 
img{ max-width:100%;} 
video{ max-width:100%; height:auto;} 
header ul li{ float:left; list-style:none; list-style-type:none; margin-right:10px;} 
header select{display:none;} 
@media (max-width:960px){ 
    header ul{ display:none;} 
    header select{ display:inline-block;} 
} 
</style> 
<body> 
<header> 
    <ul> 
        <li><a href="#" class="active">Home</a></li> 
        <li><a href="#">AAA</a></li> 
        <li><a href="#">BBB</a></li> 
        <li><a href="#">CCC</a></li> 
        <li><a href="#">DDD</a></li> 
    </ul> 
    <select> 
        <option class="selected"><a href="#">Home</a></option> 
        <option value="/AAA">AAA</option> 
        <option value="/BBB">BBB</option> 
        <option value="/CCC">CCC</option> 
        <option value="/DDD">DDD</option> 
    </select> 
</header> 
</body>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le chinois PHP. site web!

Lecture connexe :

Comment implémenter la fonction glisser-déposer dans H5

Résumé des balises au niveau du bloc H5

Comment gérer l'incompatibilité des anciennes versions des navigateurs avec H5 et C3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!