1485 sujets

Web Mobile et responsive web design

[Résolu] Font-size et bootstrap

Hey!!!

Bon je commence à bien avancer!
Là j'en suis au col-sm
Mais j'ai un problème de taille de police
En gros, j'ai cette class : 


.chauss {
	position:absolute;
	z-index:1000;
	font-family:"aller";
	font-size:12px;
	color:#fff;
	font-weight:bold;
}


puis le code avec les medias : 


@media (min-width: 786px) and (max-width: 992px) {
.chauss {
	top:-30px; 
	left:0;
	font-size:11px;
	}
}


Mais il ne prends pas en compte mon font-size:11px et dans firebug il le barre!

Qu'est ce qui cloche?

Merci de votre aide Smiley cligne
Modifié par oceane751 (09 Mar 2015 - 12:54)
Est-ce que ces styles sont bien dans cet ordre là ?

Si jamais la MQ est avant, il est normal qu’il écrase le font-size par ton premier exemple.
Alors c’est pour ça : si tu places tes media-queries à la fin, tout fonctionnera comme tu t’y attends Smiley smile

Les media-queries respectent le principe de base de la cascade elles aussi, en l’occurrence comme ton sélecteur est le même, le navigateur applique la tout dernière occurrence de font-size dans ton fichier pour ce sélecteur. C’est donc 11px.

Les media-queries n’ajoutent pas de poids aux sélecteurs CSS, il s’agit d’une condition seulement.
mes medias sont au debut, je dois donc les mettre à la fin c'est bien ça ?
parce que jusqu'ici, j'ai jamais eu de problème...
Administrateur
Bonjour,

oui comme le dit Ten.

Une règle CSS dans une règle at-media n'a qu'une seule chose de particuler : elle ne va être vue (et appliquée) que dans certaines situations (ici entre 786 et 992px de large).
Si 2 règles CSS ont exactement le même sélecteur et que dans chacune il y a une propriété CSS (la partie gauche) avec chacune une valeur différente, alors c'est la dernière rencontrée qui sera appliquée.
Ici seul font-size est commun aux 2 règles, c'est facile de voir qui est écrit en dernier (si tu observes 12px alors c'est celle-là ; si c'est 11px c'est l'autre Smiley cligne )

EDIT : en-dessous de 786px et au-dessus de 992px, le navigateur se désintéresse du contenu de la MQ donc il n'y a pour lui qu'une seule règle ayant pour sélecteur .chauss
Modifié par Felipe (09 Mar 2015 - 16:56)
Sujet clos
Aller à