Maison interface Web tutoriel CSS C'est tout relatif.

C'est tout relatif.

Apr 01, 2025 am 04:35 AM

Tout est relatif.

Dans ma mémoire d'enfance, j'avais six ans sur le siège arrière d'un break familial (les sièges de sécurité des enfants n'étaient pas populaires à ce moment-là). Mon père a conduit et ma mère a joué avec moi. C'était au tour de ma mère de poser une question. Elle avait déjà choisi un objet dans son esprit et m'a laissé deviner.

"Est-ce grand?" J'ai demandé.

"Que veux-tu dire?" Demanda la mère.

L'ensemble du jeu suit ce modèle: je pose des questions et ma mère répond avec des questions relatives.

"Vous ne pouvez me poser des questions que lorsque vous êtes à votre tour de penser aux objets", ai-je dit.

"Si vous demandez si c'est aussi grand qu'une montagne, la réponse est non. Mais par rapport à la fourmi, c'est grand."

Cette année, j'ai ré-appris le sens de la "pensée relative". Combien de temps a-t-il duré? Je pense que c'est aussi très relatif. Mais à la fin de 2020, je semble entendre ma mère me poser les mêmes questions au travail ou dans la vie:

"Relativement quoi?"

Lorsque j'ai entendu le mot «parent», les unités relatives de CSS ont immédiatement émergé dans mon esprit. Je crois que beaucoup de gens ressentent la même chose. Dans mon travail, j'utilise souvent em , rem et % . Quand j'ai appris ces unités pour la première fois (je ne me souviens pas exactement quand c'était), je les ai utilisées juste pour avoir l'air cool, et je ne connais même pas la différence entre em et rem , et je pensais qu'elles étaient liées aux écrans de rétine.

Bien sûr, cela s'est produit il y a longtemps. (Combien de temps? C'est aussi très relatif.) Maintenant, je comprends que l'unité relative est relative à l'objet qu'il fait référence . Le résultat de 2rem sur un site Web avec une taille de police racine de 16px est différent de celui d'un site Web avec une taille de police racine de 24px. Il en va de même pour les pourcentages. Dans un conteneur de 400px, 50% signifie différemment 50% dans un conteneur de 1200px.

Alors maintenant, lorsque j'attribue des valeurs de taille à l'élément, j'aurai d'abord un "dialogue" avec ma mère.

«Cet élément est 5.25EM.»

"Relativement quoi?" elle a demandé.

J'ai également appris que la pensée relative nécessite un petit changement de perspective . Cela n'a rien à voir avec la perspective sur CSS (bien que je puisse essayer de faire cette connexion). La pensée relative signifie sortir temporairement de sa propre position et regarder le problème du point de vue d'autres choses.

Je dis "d'autres choses" parce que j'y pense le plus souvent lors de l'écriture de code. Chaque fois que je travaille sur diverses parties d'un composant, je dois prêter attention au contexte - ou en perspective - où réside. Pourquoi? Parce que ces parties ont des significations différentes dans différents contextes, qui sont relatives aux composants qui les contiennent.

Quand est un<h1></h1> Juste un<h1></h1> ? Ce n'est presque jamais le cas. Ce pourrait être le titre de l'article, ce pourrait être le titre du widget, ou cela pourrait être le titre du composant de la carte. En tant qu'ingénieurs frontaux, nous nommons ces choses en fonction de la perspective des composants. Du point de vue de l'article,<h1></h1> La signification (et l'apparence) du point de vue de la carte<h1></h1> différent.

 <code>.post {} .post__title {} .widget {} .widget__title {} .card {} .card__title {}</code>
Copier après la connexion

La dénomination est une tâche difficile. Je pense souvent: "Oh! Comment devraient appeler exactement cette chose?"

"Relativement quoi?" La mère interrompit.

Je peux continuer à parler. En fait, la réflexion sur la relativité est tout aussi importante pour le code que nous écrivons, aux jeux "vingt questions", et même à notre vie personnelle. Au cours de cette année, nous sommes renversés par de nombreuses forces concurrentes, dans lesquelles la pensée relativiste peut nous apporter du réconfort et de la sagesse du stress et de la frustration - et bien sûr, il est également très relatif.

- "Cela me met beaucoup de pression." Par rapport à quoi? - "J'ai beaucoup à faire." Relativement quand? - "Mon javascript est terrible." Par rapport à qui? - "Je déteste mon lieu de travail." Relativement?

Il est facile de tomber dans un état d'esprit absolu. La pensée relative nous oblige à voir les choses différemment.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Travailler avec GraphQL Caching Travailler avec GraphQL Caching Mar 19, 2025 am 09:36 AM

Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou

Construire une application Ethereum à l'aide de Redwood.js et de la faune Construire une application Ethereum à l'aide de Redwood.js et de la faune Mar 28, 2025 am 09:18 AM

Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum

Créer votre propre bragdoc avec Eleventy Créer votre propre bragdoc avec Eleventy Mar 18, 2025 am 11:23 AM

Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.

Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Apr 02, 2025 pm 06:17 PM

J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.

Un peu sur CI / CD Un peu sur CI / CD Apr 02, 2025 pm 06:21 PM

Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:

Comparaison des navigateurs pour une conception réactive Comparaison des navigateurs pour une conception réactive Apr 02, 2025 pm 06:25 PM

Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire

Cartes empilées avec un positionnement collant et une pincée de sass Cartes empilées avec un positionnement collant et une pincée de sass Apr 03, 2025 am 10:30 AM

L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.

See all articles