7
votes

Les valeurs CSS peuvent-elles changer relativement?

#foo{font-size:$-2px} // Hypothetical code

5 commentaires

Vous pouvez utiliser EM - par rapport au parent. Par exemple, si la taille de la police: 1.5ème signifie qu'il sera 1,5 fois supérieur à la taille de la police du parent. De plus, si vous avez besoin de véritables calculs, je recommande d'utiliser Moins ou Sass.


CSS n'a actuellement aucune méthode pour modifier la valeur relative à la valeur actuelle. Nous pouvons utiliser JavaScript pour cela.


Hmm .. Pouvez-vous publier des liens avec des exemples ou où puis-je commencer?


Mais nous avons des unités relatives telles que EM, EX, REM, etc. qui peuvent être utilisées.


Taille de la police: plus petit


3 Réponses :


3
votes

1. Utilisation de la méthode Calc () forte>

Je ne comprends pas ce que vous entendez de manière dynamique. Mais pour effectuer un calcul relativement, utilisez calc () code> méthode. P>

Exemple: p> xxx pré>

2. Utilisation du préprocesseur comme SASS STRT> P>

Vous pouvez également vouloir vérifier Sass code> pour le prétraitement. L'une des caractéristiques bien prises en charge est, des variables. P>

Vous pouvez définir des variables et faire des calculs. P>

div.responsive {
   width: 10vw; /* 10% of viewport width */
   height: 10vh; /* 10% of viewport height */
   background-color: black; /* Just to make it visible while testing */
}


6 commentaires

Cela ne m'aidait pas tout à fait que CALC est utilisé pour une valeur déjà connue. Je veux utiliser un code où je ne pourrai pas connaître la 1ère valeur (dans mon exemple, la valeur 14PX).


Peut-être que le mot "dynamiquement" n'était pas le bon. J'essaie d'expliquer que si cela est possible avec CSS ou tout autre moyen, de modifier la valeur d'un sélecteur sans connaître la valeur qu'il a déjà. Je ne sais pas #foo a la taille de la police 14px. Mais je veux que cela ait -2px de ce qu'il a déjà comme une valeur.


@Dominotrix: Comment est-ce que tu ne connais pas la taille de #foo? Est-ce que c'est réglé quelque part? Peut-être que vous pouvez utiliser des variables dans SASS. Puis réinitialisez la taille à $ variable -2px. Mis à jour


Ce serait utile lorsque vous construisez la réactivité d'un site Web. Pour chaque 100px que la fenêtre est décroissante, je veux que le sélecteur #foo ait 100px soustrait de son courant. Cela n'aurait pas besoin de moi pour écrire des requêtes de média: [at] 1200px {largeur: 600px} - [at] 1100px {largeur: 500px} ... et ainsi de suite. Et je ne sais pas comment installer Sass ou moins.


@Dominotrix: Je crois que vous pouvez le faire avec Calc. Calc (100% -100px)


@Dominotrix: j'ai mis à jour avec certains approchés qui pourrait fonctionner.



4
votes

Vous pouvez utiliser rem code> qui se référera à la taille de la police globale.

p>

<div>
  I am a 14px text according to the root font-size
</div>
<div id="foo">
  I am a 12 pixel text according to the rem font-size
</div>


2 commentaires

Hmm, même si vous êtes correct, il s'agit d'une réponse personnalisée à mon problème général. Cet extrait que vous avez écrit, ne travaillera que pour cette même chose. Malheureusement, cela ne fournit pas une solution constante, car peut-être qu'il n'y en a pas. Peut-être avec Sass / Moins. Néanmoins, merci pour votre temps!


Indiquez, lorsque vous traitez avec des complexes Calculus, Sass révèle à être puissant. C'est la limite de cette technique.



1
votes

0 commentaires