Nous connaissons tous la conception réactive, non? Nous utilisons les médias pour interroger. Non, maintenant nous avons utilisé des conteneurs pour interroger, n'est-ce pas? Parfois, nous utilisons intelligemment Flexbox ou Streaming automatique. Si nous voulons être plus audacieux, nous pouvons également essayer la typographie fluide.
Je suis un peu inhabituel aux conceptions réactives étant souvent divisées en blocs discrets, tels que "la disposition A à cette taille, puis la mise en page B jusqu'à ce qu'il y ait suffisamment d'espace pour la mise en page C". C'est OK, cela fonctionne et convient au flux de travail de la conception de l'écran comme une disposition statique dans PhotoFigva (Avis de non-responsabilité, j'ai composé le nom du logiciel). Mais ce processus me semble être un compromis. J'ai toujours cru que la conception réactive devrait être presque invisible pour les utilisateurs. Lorsqu'ils ont été alignés pour acheter des billets K-pop et visiter mon site Web sur Mobile, ils ne devraient pas remarquer à quel point il était différent de l'expérience de s'asseoir sur l'énorme moniteur de jeu incurvé qu'ils ont convaincu leur patron d'avoir besoin il y a une heure.
Considérez cette bannière de héros simple et son équivalent mobile. Désolé, la conception est rude. Les images sont générées par l'IA, mais c'est la seule partie générée par l'IA de cet article.
L'emplacement et la taille de la mangouste et du texte sont différents. La façon traditionnelle d'y parvenir est de choisir deux dispositions en utilisant la requête <del>媒体</del> (désolé, conteneur). Chaque disposition peut avoir une certaine flexibilité, comme le contenu de centrage et une petite quantité de typographie fluide sur la taille de la police, mais nous sélectionnerons un point où nous allons transformer la disposition et sortir de la version empilée. Ainsi, à la largeur près du point d'arrêt, la mise en page peut sembler un peu vide ou un peu bondée.
y a-t-il une autre manière?
Les faits ont prouvé que ont . Nous pouvons appliquer le concept de composition des fluides à presque tout. De cette façon, nous pouvons avoir une disposition qui change en douceur avec la taille de son conteneur parent. Peu d'utilisateurs verront la transition, mais ils apprécieront les résultats. Pour être honnête, ils le feront.
La première étape, stylissons la mise en page séparément, un peu comme lorsque nous utilisons la requête de largeur et les points d'arrêt. En fait, utilisons les requêtes de conteneur et les points d'arrêt afin que nous puissions facilement voir quelles propriétés doivent être modifiées.
C'est la marque de notre bannière de héros, elle ne changera pas:
<div>
<div>
<h1>LookOut</h1>
<p>Eagle Defense System</p>
</div>
</div>Il s'agit du CSS lié à la version large:
#hero {
container-type: inline-size;
max-width: 1200px;
min-width: 360px;
.details {
position: absolute;
z-index: 2;
top: 220px;
left: 565px;
h1 { font-size: 5rem; }
p { font-size: 2.5rem; }
}
&::before {
content: '';
position: absolute;
z-index: 1;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url(../meerkat.jpg);
background-origin: content-box;
background-repeat: no-repeat;
background-position-x: 0;
background-position-y: 0;
background-size: auto 589px;
}
} J'ajoute l'image d'arrière-plan à un pseudo-élément ::before afin que je puisse utiliser des requêtes de conteneur dessus (car le conteneur ne peut pas s'interroger lui-même). Nous garderons cela plus tard afin que nous puissions interroger (CQI) des unités à l'aide de conteneurs en ligne. Maintenant, voici la requête de conteneur qui ne montre que la valeur que nous allons la rendre fluide:
@container (max-width: 800px) {
#hero {
.details {
top: 50px;
left: 20px;
h1 { font-size: 3.5rem; }
p { font-size: 2rem; }
}
&::before {
background-position-x: -310px;
background-position-y: -25px;
background-size: auto 710px;
}
}
}Vous pouvez voir le code s'exécuter dans une démo en direct - il est complètement statique de montrer les limites d'une approche typique.
Maintenant, nous pouvons obtenir les points de départ et de fin de la taille et de la position du texte et de l'arrière-plan et le rendre fluide. La taille du texte utilise la typographie fluide d'une manière que vous connaissez déjà. Voici le résultat - j'expliquerai ces expressions après avoir regardé le code.
est d'abord le changement de position du texte et de taille:
<div>
<div>
<h1>LookOut</h1>
<p>Eagle Defense System</p>
</div>
</div>C'est la position de fond et la taille de l'image de la Mongolie:
#hero {
container-type: inline-size;
max-width: 1200px;
min-width: 360px;
.details {
position: absolute;
z-index: 2;
top: 220px;
left: 565px;
h1 { font-size: 5rem; }
p { font-size: 2.5rem; }
}
&::before {
content: '';
position: absolute;
z-index: 1;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url(../meerkat.jpg);
background-origin: content-box;
background-repeat: no-repeat;
background-position-x: 0;
background-position-y: 0;
background-size: auto 589px;
}
}Maintenant, nous pouvons supprimer complètement la requête du conteneur.
Expliquons ces expressions clamp(). Nous allons commencer par l'expression de l'attribut top.
@container (max-width: 800px) {
#hero {
.details {
top: 50px;
left: 20px;
h1 { font-size: 3.5rem; }
p { font-size: 2rem; }
}
&::before {
background-position-x: -310px;
background-position-y: -25px;
background-size: auto 710px;
}
}
}Vous remarquerez qu'il y a un commentaire là-bas. Ces expressions sont une bonne idée de la raison pour laquelle les chiffres magiques sont mauvais. Mais nous ne pouvons pas les éviter ici parce que ce sont des solutions à certaines équations simultanées - CSS ne peut pas faire ça!
Les limites supérieures et inférieures transmises à sont suffisamment claires, mais l'expression au milieu provient de ces équations simultanées: clamp()
/* 行更改
* -12,27 +12,32
*/
.details {
/* ... 行 14-16 未更改 */
/* 对 360px 宽的容器计算结果为 50px，对 1200px 宽的容器计算结果为 220px */
top: clamp(50px, 20.238cqi - 22.857px, 220px);
/* 对 360px 宽的容器计算结果为 20px，对 1200px 宽的容器计算结果为 565px */
left: clamp(20px, 64.881cqi - 213.571px, 565px);
/* ... 行 20-25 未更改 */
h1 {
/* 对 360px 宽的容器计算结果为 3.5rem，对 1200px 宽的容器计算结果为 5rem */
font-size: clamp(3.5rem, 2.857rem + 2.857cqi, 5rem);
/* ... 字体粗细未更改 */
}
p {
/* 对 360px 宽的容器计算结果为 2rem，对 1200px 宽的容器计算结果为 2.5rem */
font-size: clamp(2rem, 1.786rem + 0.952cqi, 2.5rem);
}
}
/* 行更改 * -50,3 +55,8 */ /* 对 360px 宽的容器计算结果为 -310px，对 1200px 宽的容器计算结果为 0px */ background-position-x: clamp(-310px, 36.905cqi - 442.857px, 0px); /* 对 360px 宽的容器计算结果为 -25px，对 1200px 宽的容器计算结果为 0px */ background-position-y: clamp(-25px, 2.976cqi); /* 对 360px 宽的容器计算结果为 710px，对 1200px 宽的容器计算结果为 589px */ background-size: auto clamp(589px, 761.857px - 14.405cqi, 710px);
. 20.238cqi – 22.857px
, nous avons;
<h1></h1>
/* 对 360px 宽的容器计算结果为 50px，对 1200px 宽的容器计算结果为 220px */ top: clamp(50px, 20.238cqi - 22.857px, 220px);
Il convient de noter que les équations sont différentes en fonction de l'unité de votre objectif.
<code>f + 12v = 220 f + 3.6v = 50</code>
La fonction
clamp() n'est pas strictement nécessaire pour le moment. Dans chaque cas, la limite de clamp() est définie sur une valeur lorsque la largeur du conteneur est de 360px ou 1200px. Étant donné que le conteneur lui-même est limité à ces restrictions - en définissant les valeurs min-width et max-width - l'expression clamp() ne doit jamais appeler aucune limite. Cependant, si nous changeons d'avis (nous sommes sur le point de le faire), je préfère garder clamp() parce que les limites implicites comme celle-ci sont difficiles à trouver et à maintenir.
Nous pouvons penser que notre travail est terminé, mais nous ne l'avons pas fait. La disposition n'est toujours pas très utile. Le texte est directement au-dessus de la tête de la Mongoose. Bien que je sois garanti que cela ne fera pas de mal à la Mongoose, je n'aime pas son apparence. Alors apportons quelques modifications pour empêcher le texte de frapper la Mongoose.
Le premier est très simple. Nous déplaçons plus rapidement la Mongoose vers la gauche pour qu'elle fasse la place. Le moyen le plus simple est de changer l'extrémité inférieure de l'interpolation en un récipient plus large. Nous le réglerons pour que la mangouste se déplace complètement vers la gauche à 450px, plutôt que de descendre à 360px. Il n'y a aucune raison que les points de début et d'extrémité de toutes nos expressions fluides doivent être alignés sur la même largeur, nous pouvons donc baisser facilement les autres expressions à 360px.
Avec ma calculatrice fiable, nous avons juste besoin de modifier l'expression clamp() de la propriété de position d'arrière-plan:
<div>
<div>
<h1>LookOut</h1>
<p>Eagle Defense System</p>
</div>
</div>Cela améliore la situation, mais pas complètement. Je ne veux pas le déplacer plus rapidement, donc ensuite nous allons regarder le chemin du texte. Actuellement, il se déplace en ligne droite, comme indiqué ci-dessous:
Mais pouvons-nous le plier? Oui, nous pouvons.
Une façon de le faire est de définir deux interpolations différentes pour les coordonnées supérieures, de placer la ligne à différents angles, puis de choisir la plus petite. De cette façon, il permet aux lignes droites plus abruptes de "gagner" à des largeurs de conteneurs plus grandes, tandis que les lignes droites moins profondes deviennent la valeur gagnante lorsque la largeur du conteneur est inférieure à environ 780px. Le résultat est une ligne droite avec une courbe qui manque la mangouste.
Nous ne changeons que la valeur top, mais nous devons d'abord calculer deux valeurs intermédiaires:
#hero {
container-type: inline-size;
max-width: 1200px;
min-width: 360px;
.details {
position: absolute;
z-index: 2;
top: 220px;
left: 565px;
h1 { font-size: 5rem; }
p { font-size: 2.5rem; }
}
&::before {
content: '';
position: absolute;
z-index: 1;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url(../meerkat.jpg);
background-origin: content-box;
background-repeat: no-repeat;
background-position-x: 0;
background-position-y: 0;
background-size: auto 589px;
}
} Pour ces valeurs, au lieu de les calculer officiellement en utilisant des points intermédiaires soigneusement sélectionnés, j'ai essayé les points de terminaison jusqu'à ce que j'obtienne le résultat que je voulais. Les expériences sont aussi efficaces que les calculs et peuvent obtenir les résultats dont vous avez besoin. Dans ce cas, je commence par une interpolation répétée dans une variable personnalisée. J'aurais pu diviser le chemin en pièces explicites à l'aide d'une requête de conteneur, mais cela ne réduit pas les frais généraux mathématiques, et l'utilisation de la fonction min() est plus simple dans mes yeux. De plus, cet article ne concerne pas strictement les requêtes de conteneurs, non?
Le texte se déplace désormais le long de ce chemin. Ouvrez une démo en direct pour voir comment cela fonctionne.
Le dernier point d'explication sur le calcul est qu'il y a des limites en termes de ce que nous pouvons et ne pouvons pas faire. Le premier, nous avons déjà légèrement atténué, c'est-à-dire que ces interpolations sont linéaires. Cela signifie que la décoloration ou un autre comportement complexe est impossible.
Une autre limitation majeure est que le CSS ne peut générer des valeurs de longueur que de cette manière, de sorte que l'opacité du fluide ou les angles de rotation basés sur la taille du conteneur ou de la fenêtre ne peut pas être appliquée dans le CSS pur. Le préprocesseur ne peut pas non plus nous aider ici, car la limitation est de savoir comment calc() fonctionne dans le navigateur.
Si vous êtes prêt à compter sur une petite quantité de JavaScript, vous pouvez annuler les deux restrictions. Il suffit d'observer la largeur du conteneur et de définir une propriété personnalisée CSS sans unité. Je vais l'utiliser pour faire en sorte que le texte suive une courbe de Bezier quadratique comme suit:
Il y a trop de codes à répertorier, et il y a trop d'explications mathématiques des courbes de Bezier, mais veuillez la vérifier dans la démonstration en temps réel.
Si une expression comme calc(1vw / 1px) n'échoue pas dans CSS, nous n'avons même pas besoin de JavaScript. Ils n'ont aucune raison d'échouer car ils représentent le rapport entre deux longueurs. Tout comme il y a 2,54 cm en 1 pouce, lorsque la largeur de la fenêtre est de 800 pix, il y a 8px en 1 VW, donc calc(1vw / 1px) doit être calculé comme 8 valeurs sans unités.
mais ils échouent, donc tout ce que nous pouvons faire, c'est énoncer notre point de vue et passer à autre chose.
Bien sûr, il y a toujours des dispositions qui nécessitent une requête de taille; certaines conceptions doivent seulement être modifiées à des points d'arrêt fixes. Le cas échéant, il n'y a aucune raison d'éviter de le faire. Il n'y a également aucune raison d'éviter de mélanger les deux, par exemple, en ajustant en douceur la taille et la position de l'arrière-plan tout en utilisant des requêtes pour basculer entre les définitions de la grille du placement de texte. Mon exemple de Mongoose est délibérément conçu pour être simple à des fins de démonstration.
Je tiens à ajouter que je suis très excité par la possibilité de positionnement fluide en utilisant la nouvelle API de positionnement d'ancrage. Il est possible d'utiliser le positionnement de l'ancrage pour définir comment deux éléments se déroulent ensemble à l'écran, mais il reste à discuter plus tard.
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!
solution de réinitialisation de connexion
MySQL change la méthode du moteur de stockage d'une table
Explication détaillée de la commande nohup
Comment connecter le haut débit au serveur
Quels sont les caractères génériques Oracle ?
fonction système()
Utilisation de la classe de calendrier en Java
Comment ouvrir un fichier au format CSV
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
