Il existe plusieurs méthodes pour une mise en page réactive

Certaines méthodes de mise en page réactive incluent : 1. Requête multimédia ; 2. Pourcentage [%] ; 3. vw ou vh, vw représente la largeur par rapport à la fenêtre de vue et vh représente la hauteur par rapport à la vue. window; 4 , l'unité rem est relative à la taille de la police de l'élément html; 5. Disposition élastique flexible.

L'environnement d'exploitation de cet article : Acer S40-51, Windows 10 Home version chinoise

Recommandé : css didacticiel vidéo

Certaines méthodes de mise en page réactive sont :

Méthode de mise en page réactive 1 : requête multimédia

Utilisez @media requêtes multimédias pour définir différents styles pour différents types de médias, en particulier pour les pages réactives, vous pouvez écrire plusieurs ensembles de styles pour différentes tailles d'écran afin d'obtenir un effet adaptatif. Par exemple :

Grâce aux requêtes multimédias, vous pouvez implémenter une mise en page réactive en écrivant différents styles pour les appareils avec différentes résolutions. Par exemple, nous pouvons définir différentes images d'arrière-plan pour les écrans avec différentes résolutions. Par exemple, la définition d'images @2x pour les téléphones mobiles à petit écran et @3x pour les téléphones mobiles à grand écran peut être facilement réalisée grâce aux requêtes multimédias.

Cependant, les inconvénients des requêtes multimédias sont également évidents. S'il y a trop de styles qui doivent être modifiés lorsque la taille du navigateur change, alors plusieurs ensembles de codes de style seront très fastidieux.

Méthode de mise en page réactive deux : pourcentage %

Par exemple, lorsque la largeur ou la hauteur du navigateur change, l'unité de pourcentage peut être utilisée pour rendre le navigateur La largeur et la hauteur du composant changent à mesure que le navigateur change, obtenant ainsi un effet réactif.

Le pourcentage des attributs height et width dépend de la largeur et de la hauteur de la balise parent. Cependant, la situation avec le remplissage, la bordure, la marge et d'autres attributs est différente

• Si le remplissage d'un élément enfant est défini en pourcentage, qu'il soit vertical ou horizontal, il le sera. être relatif à la largeur de l'élément parent direct, quelle que soit la hauteur de l'élément parent.

• Si la marge d'un élément enfant est fixée à un pourcentage, qu'elle soit verticale ou horizontale, elle sera relative à la largeur de l'élément parent direct

• border-radiusNon, si border-radius est fixé à un pourcentage, il est relatif à sa propre largeur

Inconvénients

C'est difficile pour calculer, si l'on veut définir la largeur d'un élément et la hauteur, selon le projet de conception, doit être convertie en unités de pourcentage.

Si des pourcentages sont utilisés dans chaque attribut, les attributs relatifs à l'élément parent ne sont pas uniques. Par exemple, la largeur et la hauteur sont relatives à la largeur et à la hauteur de l'élément parent, tandis que la marge et le remplissage sont relatifs à la largeur de l'élément parent, que ce soit verticalement ou horizontalement, border-radius est relatif à l'élément lui-même, etc., ce qui nous permet d'utiliser facilement des unités de pourcentage pour créer une mise en page. Le problème devient compliqué.

Par conséquent, il n'est pas recommandé d'utiliser % pour une mise en page réactive.

Troisième méthode de mise en page réactive : vw/vh

CSS3 introduit une nouvelle unité vw/vh, qui est liée à la fenêtre de vue vw signifie par rapport à la fenêtre de vue. La largeur, vh représente par rapport à la hauteur de la fenêtre de visualisation. Pour tout élément hiérarchique, lors de l'utilisation d'unités vw, 1vw est égal à un pour cent de la largeur de la vue.

est très similaire à la disposition en pourcentage, mais en mieux.

Méthode de mise en page réactive quatre : rem

l'unité rem est l'élément html relatif à la taille de la police, également appelé élément racine. Par défaut, la taille de police des éléments HTML est de 16 px. Donc à ce moment 1rem = 16px.

Version optimisée

//动态为根元素设置字体大小
function init () {
 // 获取屏幕宽度
 var width = document.documentElement.clientWidth
 // 设置根元素字体大小。此时为宽的10等分
 document.documentElement.style.fontSize = width / 10 + 'px'
}
//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

Compréhension : le code ci-dessus est implémenté, quelle que soit la façon dont la fenêtre visible de l'appareil change, rem est toujours défini sur 1/10 de la largeur. atteint. Ce n'est pas aussi rigide que la première version de la requête multimédia.

Le code ci-dessus doit être écrit avant le dom (peut être placé dans la première balise de script dans l'en-tête)

Méthode de mise en page réactive cinq : mise en page élastique flexible

La mise en page flexible est un moyen très pratique d'implémenter une mise en page réactive qui repose uniquement sur les styles CSS. C'est également la méthode la plus couramment utilisée pour implémenter la réactivité.

Surtout maintenant, les sites Web de commerce électronique ou les pages d'applications mobiles telles que Youtao et Youtong peuvent être facilement mis en œuvre grâce à une mise en page flexible.

La mise en page flexible a des attributs correspondants sur les éléments parent et enfant pour réguler "l'élasticité" des éléments enfants dans l'élément parent.

• Sur l'élément parent, les propriétés liées à la mise en page flexible que nous utilisons souvent incluent principalement flex-direction, flex-wrap, justification-content, align-items, align-content, Ces les attributs régulent la flexibilité de l'élément dans l'élément parent depuis la direction de l'axe principal, s'il doit être enroulé, l'alignement de l'élément sur l'axe principal, l'alignement de l'élément sur l'axe transversal et l'alignement de l'élément sur plusieurs axes.

• Sur les éléments enfants, les propriétés liées à la mise en page flexible que nous utilisons souvent incluent principalement order, flex-grow, flex-shrink, flex-basis, align-self. Chaque attribut régule le. flexibilité du projet lui-même depuis le tri du projet, le taux d'agrandissement du projet, le taux de réduction du projet, l'espace de l'axe principal occupé par le projet et l'alignement d'un seul projet sur l'axe transversal.

Si vous souhaitez en savoir plus sur la programmation, merci de faire attention à la rubrique formation php !

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!