Bases de la mise en page réactive HTML5 (1)

Mise en page réactive HTML5 (1)

Méthode de mise en page pour le développement mobile - mise en page fluide

La première fois que vous rencontrerez le concept de mise en page fluide, vous penserez que ce concept est très haut de gamme, mais après une compréhension plus approfondie, vous constaterez qu'il est en fait très simple. Pour ceux qui ont de l'expérience dans le développement Web de bureau HTML, en fait, la mise en page fluide a modifié certaines mises en page codées en dur sur le bureau en pourcentages pour s'adapter à différentes tailles de mobiles.

La disposition en flux peut également être appelée disposition en pourcentage en termes simples, qui comprend généralement les points suivants :

• Pourcentage de largeur

• Pourcentage de positionnement

• Remplacez px par em et rem

• Image élastique L'objet de référence pour définir ces pourcentages est adapté en fonction de la taille de l'écran du téléphone mobile, et un certain effet est obtenu grâce à l'adaptation de la taille.

Pourquoi devez-vous utiliser une mise en page fluide ? S'adapter au terminal mobile ?

Les pages Web à taille de pixel fixe constituent le moyen le plus simple de faire correspondre les affichages à taille de pixel fixe. Mais cette méthode n'est pas une méthode de production entièrement compatible pour les futures pages Web. Nous avons besoin de certaines méthodes pour nous adapter aux appareils inconnus. Les tailles de pixels fixes (960/980) ne sont pas évolutives.

Comment mettre en page avec des pourcentages page?

Pourcentage de taille :

Modifier la page Web de la mise en page fixe à la mise en page en pourcentage :

Formule obligatoire à retenir : largeur de l'élément cible / largeur de l'élément de contexte = largeur en pourcentage.

PS : La largeur de l'élément de contexte fait ici référence à la largeur de l'élément parent qui lui est associé, ce qui affectera directement le pourcentage de largeur de l'élément enfant.

Pourcentage de position :

Essentiellement similaire au pourcentage de taille, c'est-à-dire la marge fixe d'origine ou Distance de positionnement convertie en pourcentage

Par exemple :

et le côté gauche de la page font 50px et la largeur du contexte est de 320px, soit 50/320=15,625%

Réservez 5 points décimaux.

em :

La fonction de em est généralement de définir la taille de la police, de définir une taille de police standard dans son parent et de contrôler le pourcentage de la police via em.

• La valeur de em n'est pas fixe

• em héritera de la taille de police de l'élément parent.

rem :

Bien qu'ils puissent réaliser l'affichage en pourcentage des polices et modifier la taille de la police proportionnellement en fonction de la taille de l'écran, une fois l'imbrication structurelle effectuée pendant le processus de développement réel, la police parent le fera. La proportion change, la police de l'élément enfant changera proportionnellement en fonction du changement de la police du parent. Si em est utilisé pour changer la police, le montant du calcul sera très important, ce qui entraînera inévitablement une certaine charge sur le développement.

Une nouvelle unité rem a été introduite dans CSS3, qui ne changera qu'en fonction des balises HTML.

rem signifie root em, et la racine de em est html, ce qui signifie que la proportion change uniquement en fonction du html.

Image flexible :

Paramètres d'image width:100%, ou background-size:100% 100%.

Seuil de réglage de l'image : largeur maximale.

peut définir les valeurs maximales et minimales de l'image.

Bien entendu, la mise en page fluide n'est qu'un moyen de s'adapter au terminal mobile, et elle ne peut pas obtenir l'effet de pages Web réactives. Plus tard, je vous présenterai une autre méthode d'adaptation appelée media query. La combinaison des deux méthodes d'adaptation peut obtenir l'effet de mise en page réactif final.

Ce qui précède est le contenu des bases de la mise en page réactive HTML5 (1). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !