Que signifie la conception réactive HTML5 ?

Le design réactif HTML5 signifie utiliser une mise en page en pourcentage pour créer une interface fluide et flexible, tout en utilisant des requêtes multimédias pour limiter la gamme changeante d'éléments ; le concept de design réactif est basé sur une mise en page fluide, des images flexibles, des tableaux flexibles, des vidéos et des médias flexibles ; requêtes Une combinaison de technologies.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur Dell G3.

Que signifie le responsive design html5 ?

Qu'est-ce que le responsive :

Le concept de responsive design est basé sur une combinaison de technologies telles que la mise en page fluide, les images élastiques, les tables élastiques, les vidéos élastiques et les requêtes multimédias. En utilisant une disposition en pourcentage pour créer une interface fluide et flexible et en utilisant des requêtes multimédias pour limiter la gamme changeante d'éléments, la combinaison des deux constitue le cœur du design réactif.

Qu'est-ce que viewport :

Viewport est un concept très important dans le design réactif. Le concept de fenêtre d'affichage est divisé en deux types de fenêtres pour les navigateurs mobiles, l'une est la fenêtre visible, qui correspond à la taille de l'appareil, et l'autre est la fenêtre d'affichage, qui correspond à la largeur de la page Web.

Balise

En HTML5, la balise peut être utilisée pour configurer les propriétés de la fenêtre d'affichage

Syntaxe de base :

  <meta name="viewport" content="uesr-scalable=no, width=device-width,initial-scale=1.0,maximum-scale=1.0">

Explication de l'attribut :

uesr-scalable=no : utilisée pour définir si l'utilisateur peut zoomer, la valeur par défaut est oui

width=device-width : utilisé pour définir la largeur de la fenêtre d'affichage, ce qui signifie ici la même chose que la largeur de la fenêtre visible

initial-scale=1.0 : utilisé pour définir la taux de mise à l'échelle initial, la valeur est 0·10,0

maximum-scale=1,0 : utilisé pour définir le taux de zoom minimum, la valeur est 0·10,0

hauteur : utilisée pour définir la largeur de la fenêtre d'affichage

minimum-scale : utilisé pour définir le taux de zoom minimum

Requêtes multimédias

Dans la spécification CSS3, les requêtes multimédias peuvent modifier le mode d'affichage de la page en fonction des différences de largeur de fenêtre, d'orientation de l'appareil, etc. Les requêtes multimédias se composent de types de médias et d'expressions conditionnelles.

L'exemple de code est le suivant :

@media screen and(max-width:960px){
               /*样式设置：表示媒体类型screen并且屏幕宽度小于等于960px时的样式*/
  }

Disposition en pourcentage :

La disposition fixe (en pixels) peut être convertie en largeur en pourcentage pour implémenter la disposition en pourcentage :

La formule de conversion est : largeur de l'élément cible/largeur de la boîte parent =Pourcentage de largeur

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS, Tutoriel vidéo HTML)

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!