Points d'arrêt Sass @mixin traitant uniquement les styles mobiles/tablettes

Dans un effort pour mieux comprendre l'utilisation des mixins Sass, j'essaie d'apprendre à les utiliser pour mes points de rupture de requête média et il semble les traiter uniquement au-dessus et en dessous. Donc, si vous regardez le code SCSS j'ai posté ci-dessous, il va rendre les styles pour mobileonly (ci-dessous37.5em sur la fenêtre de la fenêtre) et phablet (ci-dessus37.5em sur la fenêtre de la fenêtre), mais pas pour laptop ou desktop . Lorsque la fenêtre de la fenêtre d'affichage est agrandie, elle ne change pas après ma variable hexadécimale Idéclarée. Selon les outils de développement Chrome, les requêtes média semblent fonctionner, mais le @media (min-width: 37.5em) semble toujours écraser les styles parce que les styles que je veux sont barrés dans les outils de développement. Ainsi, même à la taille de la fenêtre de fenêtre d'affichage complète, @media (min-width: 37.5em) est le seul style appliqué. Pourquoi cela serait-il?Points d'arrêt Sass @mixin traitant uniquement les styles mobiles/tablettes

Here est un jsfiddle de mon numéro exact.

Et, pour plus de précisions, voici mon code:

HTML:

<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="css/build/main.css"> 
    </head> 
<body> 
    <header> 
    </header> 
</body> 
</html>

SCSS:

$azure: #f3f4f4; 
$chateau-green: #2bb656; 
$firefly: #364141; 
$fern: #59cb59; 
$pastel-green: #75dd66; 
$pigment-green: #0ca750; 

@mixin breakpoint($point) { 
    @if $point == desktop { 
    @media (min-width: 70em) { @content ; } 
} 
    @else if $point == laptop { 
    @media (min-width: 64em) { @content ; } 
} 
    @else if $point == tablet { 
    @media (min-width: 50em) { @content ; } 
} 
    @else if $point == phablet { 
    @media (min-width: 37.5em) { @content ; } 
} 
@else if $point == mobileonly { 
    @media (max-width: 37.5em) { @content ; } 

} 
} 

header { 
    height: 600px; 
    width:100%; 
    @include breakpoint(desktop) { 
    background-color:$azure; 
    } 
    @include breakpoint(laptop) { 
    background-color:$chateau-green; 
    } 
    @include breakpoint(phablet) { 
    background-color:$firefly; 
    } 
    @include breakpoint(mobileonly) { 
     background-color:$pastel-green; 
    } 
}

EDIT: Ajouté Outputed CSS:

header { 
    height: 600px; 
    width: 100%; 
} 
@media (min-width: 70em) { 
    header { 
    background-color: #f3f4f4; 
    } 
} 
@media (min-width: 64em) { 
    header { 
    background-color: #2bb656; 
    } 
} 
@media (min-width: 37.5em) { 
    header { 
    background-color: #364141; 
    } 
} 
@media (max-width: 37.5em) { 
    header { 
    background-color: #75dd66; 
    } 
}

Source

2017-08-22 newman

Le question ici est que le style w ritten pour min-width: 37.5em écrase le style écrit pour min-width: 64em et de même pour les autres cas. Pour cela, essayez de définir le min-width ainsi que le max-width pour que le style soit spécifique.

Here est le violon js.

Source

2017-08-22 04:26:27 kmg

Cela a vraiment fonctionné. Merci beaucoup. Pour une raison quelconque, j'ai pensé que 'min-width' remplacerait une nouvelle largeur dans la fenêtre de la fenêtre. – newman

Points d'arrêt Sass @mixin traitant uniquement les styles mobiles/tablettes

Répondre

Questions connexes