[Résolu] Media queries

Hello,

Une image sera plus simple pour que l'on comprenne ensemble


Contexte :
Sur l'image, j'ai sélectionné ma balise HTML cela me permet donc de voir le css associé à cette balise.




Question :
Etant à 1144 pixels (voir point (1) sur l'image) pourquoi est ce ma média querie qui est appliqué (voir point (2) sur l'image) alors qu'elle est en "max-width:1118px" ?

Merci de m'orienter
Modifié par JENCAL (20 Jun 2018 - 14:37)

Salut..

Euh... c'est 943 ton width là non ??

regarde bien... écran coupé en 2
Modifié par pchlj (20 Jun 2018 - 14:53)

Je dirais bien qu'il y a 15px pour la scrollbar qui ne sont pas pris en compte mais cela ne ferait que 1144 - 15 = 1129… Tu sais reproduire sur un codepen ou ta page est en ligne ?

pchlj a écrit :
Salut..

Euh... c'est 943 ton width là non ??

regarde bien... écran coupé en 2

ah nn c'est bien 1144 mon width ^^

Yordi a écrit :
Je dirais bien qu'il y a 15px pour la scrollbar qui ne sont pas pris en compte mais cela ne ferait que 1144 - 15 = 1129… Tu sais reproduire sur un codepen ou ta page est en ligne ?

je vais essayé

Bien sur sur Codepen , pas de soucis.... bordel ^^

Si cela fonctionne sur codepen, il n'y a aucune raison pour laquelle cela ne fonctionnerait pas sur un navigateur directement.

Es-tu sûr d'avoir examiner l’élément après la redimensionner de la fenêtre ?

Si c'est le cas, il arrive que des navigateurs soient perturbés par des éléments adjacents, essaye de relancer Firefox, puis d'ouvrir les outils de développement en fenêtre séparée.

Sinon je vois bien d'autres soucis dans ton CSS, notamment le fait que ce dernier soit généré deux fois. Aïe aïe aïe le poids et le traitement ! ... Je suppose, un double appel en Less ou en Sass dans tes fichiers.
Modifié par Nolan (20 Jun 2018 - 16:53)

Nolan a écrit :
Si cela fonctionne sur codepen, il n'y a aucune raison pour laquelle cela ne fonctionnerait pas sur un navigateur directement.

Es-tu sûr d'avoir examiner l’élément après la redimensionner de la fenêtre ?

Tout à fait

Nolan a écrit :

Si c'est le cas, il arrive que des navigateurs soient perturbés par des éléments adjacents, essaye de relancer Firefox, puis d'ouvrir les outils de développement en fenêtre séparée.

Je viens d'essayé. Du coup j'ai le même soucis.

Nolan a écrit :

Sinon je vois bien d'autres soucis dans ton CSS, notamment le fait que ce dernier soit généré deux fois. Aïe aïe aïe le poids et le traitement ! ... Je suppose, un double appel en Less ou en Sass dans tes fichiers.

Exactement ! gros problème de duplication via sass, en train d'être corriger merci.

Du coup, je redondais et en même temps je cherché. J'ai trouvé qu'en faite cela provient de chrome, pour je ne sais quel raison. Par contre si je met vraiment en responsive via l'onglet "telephone" de chrome (à coté d'Elements) et que je saisi 1119px, je vois pas de problème et si je saisi 1117 px je vois bien ma médiaquéries...

Donc en faite on retrouve une vrai différence entre une inspection d'élèments classique (avec resize de la page) ET avec l'onglet "reponsive" qui lui fonctionne correctement.


Merci à vous.

Hello

En fait je viens de remarquer suite à ta dernière réflexion que tu utilises

@media screen <- screen étant le moyen de cibler l'écran physique du device

du coup ton ordi est plus grand et quand tu met le mode responsive de l'inspecteur de google il redéfinit la taille de l'écran physique

c'est pour ça

enlève screen et tu auras un comportement identique avec un resize qu'avec un changemnt d'écran

pchlj a écrit :
@media screen &lt;- screen étant le moyen de cibler l'écran physique du device
du coup ton ordi est plus grand et quand tu met le mode responsive de l'inspecteur de google il redéfinit la taille de l'écran physique
enlève screen et tu auras un comportement identique avec un resize qu'avec un changemnt d'écran

Salut pchlj,

Normalement le "screen" et le reste de la règle ne sont pas lié... si ? Pour moi ils sont indépendant, l'un n'influe pas sur le comportement de l'autre. Le min-width (ou autre) aura toujours la même valeur peut importe le media ciblé... non ?? #monMondeSeffondre

@_laurent

Fais le test et tu verras le screen est bien en héritage pour la liaison du reste de la classes.

regarde bien écran coupé en 2




——————————————————————————————
équipement dentaire
www.stomtools.ru
Modifié par faceplate (22 Jun 2018 - 08:43)

j'ai pas compris l'histoire de l'écran coupé en 2 ..

Dans tes dents !



Si ça c'est pas de la pub, en tout cas ça y ressemble.