Moins de variables CSS set dans media query?
je travaille sur un site spécifique à l'iPad. Pour faire fonctionner mon site web à la fois sur l'affichage iPad de la rétine et les versions plus anciennes d'iPads, je veux mettre une variable dans moins CSS dans la requête de médias comme:
@media all and (max-width: 768px) {
@ratio: 1;
}
@media all and (min-width: 769px) {
@ratio: 2;
}
donc quand vous définissez quelque chose en pixels, vous pouvez faire
width: 100px * @ratio;
mais j'ai eu une erreur de compilation disant que @ratio n'est pas défini. Est-il possible d'avoir une solution de contournement pour le faire fonctionner? Grâce.
6 réponses
Ce serait bien, mais c'est impossible de faire comme ceci.
compile moins vos requêtes médias aux requêtes médias réelles, donc au moment de la compilation, il n'y a aucune indication de la requête média qui sera pertinente pour le navigateur.
après le temps de compilation vous avez juste CSS pas moins de sorte que vous ne pouvez plus avoir de variables.
vous pouvez le faire à la place mais ce n'est pas aussi élégant:
@base_width: 100px;
@media all and (max-width: 768px) {
.something {
width: @base_width;
}
}
@media all and (min-width: 769px) {
.something {
width: @base_width * 2;
}
}
je sais que je suis en retard avec ma réponse mais quelqu'un pourrait trouver cela utile.
vous pouvez déplacer vos styles dans un fichier séparé
// styles.less
.foo {
width: 100px * @ratio;
}
et ensuite importer le fichier plusieurs fois après avoir changé les valeurs des variables
// main.less
@ratio: 1; // initial value
@media all and (max-width: 768px) {
@ratio: 1;
@import (multiple) "styles";
}
@media all and (min-width: 769px) {
@ratio: 2;
@import (multiple) "styles";
}
notez que (multiple) est important ici
le code compilé ressemblera à ceci
// main.css
@media all and (max-width: 768px) {
.foo {
width: 100px;
}
}
@media all and (min-width: 769px) {
.foo {
width: 200px;
}
}
C'est un peu hackish, mais une solution possible est de définir la taille de police pour un élément d'enrubannage et de définir toutes les unités à em :
HTML:
<div id="wrap">
<div class="child1"></div>
<div class="child2"></div>
</div>
moins:
#wrap
{
font-size: 100px;
width: 10em; // = 1000px;
@media all and (max-width: 768px)
{
font-size: 60px;
}
.child1
{
width: 5em; // 500px normally, 300px on small screens
}
.child1
{
width: 2.5em; // 250px normally, 150px on small screens
}
}
cela ne fonctionne évidemment pas si vous avez des éléments qui contiennent du texte et des enfants.
moins actuellement ne peut pas faire cela, bien qu'il serait techniquement possible pour lui de le faire. Cette fonctionnalité a été demandée dans le numéro GitHub intitulé moins de variables dans les requêtes médias .
Voir Aussi cette question: pré-processeur CSS avec possibilité de définir des variables dans une requête @media
j'ai trouvé la solution acceptée de ne pas fonctionner, car le compilateur se plaindrait que le mixin n'était pas défini. Une solution alternative:
@base_width: 100px;
.mixin {
width: @base_width;
@media all and (min-width: 769px) {
width: @base_width * 2;
}
}
avec moins nous pouvons définir des variables pour la requête de médias.
tout d'abord détecter la résolution iPad:
@iPad: ~"only screen and (min-width: 40.063em) and (max-width: 64em);
ce sont l'équivalent em de 641px et 1024px.
Détectez maintenant la haute résolution:
@highResolution: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 1.5)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)";
Nous pouvons maintenant combiner ces 2 variables dans une requête multimédia comme celle-ci:
@media @iPad, @highResolution{ .yourCssClass{} }
valable uniquement sur iPad (ou résolutions similaires) avec affichage rétinien (ou densité de pixels similaire).