Comment HTML adapte automatiquement la conception Web à la largeur de l'écran

L'article d'aujourd'hui parle principalement de la façon dont HTML adapte automatiquement la conception Web à la largeur de l'écran. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Autoriser l'ajustement automatique de la largeur de la page Web

Comment fonctionne la « conception Web adaptative » ? Ce n'est pas si difficile.

Tout d'abord, ajoutez une ligne de balise méta viewport à l'en-tête du code de la page Web.

viewport est la largeur et la hauteur par défaut de la page Web. La ligne de code ci-dessus signifie que la largeur de la page Web est égale à la largeur de l'écran par défaut (largeur = largeur de l'appareil) et au rapport de mise à l'échelle d'origine (échelle initiale). =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.

Ne pas utiliser la largeur absolue

Car la page Web ajustera la mise en page en fonction de la largeur de l'écran , vous ne pouvez pas utiliser de largeur absolue. La mise en page ne peut pas non plus utiliser d'éléments de largeur absolue. Celui-ci est très important.

Plus précisément, le code CSS ne peut pas spécifier la largeur des pixels : <span style="font-family:'Courier New';font-size:14px;">width:xxx px;<code><span style="font-family:'Courier New';font-size:14px;">width:xxx px;</span>Seule la largeur en pourcentage peut être spécifiée : <span style="font-family:'Courier New';font-size:14px;">largeur : xx%;<code><span style="font-family:'Courier New';font-size:14px;">width: xx%;</span> ou <span style="font-family:'Courier New';font-size:14px;">width:auto;<code><span style="font-family:'Courier New';font-size:14px;">width:auto;</span>

<span style="font-family :'Courier New';font-size:14px;">Recommandations associées : <code><span style="font-family:'Courier New';font-size:14px;">相关推荐：</span>

Largeur d'écran adaptative de la page Web

Conception Web réactive (adaptative) HTML5

Comment créer une page Web qui s'adapte à la taille de l'écran

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!