Bonjour,

Je suis en train de mettre au point un site WP "portable" sur PC et mobiles.

Ayant rencontré un problème de cascade avec @media, et ne trouvant pas de solution, j'ai entrepris de rédiger un sujet.
A la fin de la rédaction j'ai trouvé la solution.

Il s'agit d'un cas d'école.
Supprimer, ce serait dommage compte tenu je pense de l'exemple, publié résolu directement c'est bizarre en première approche.
Je laisse donc le soin au modérateur d'en faire quelque chose.

Voici le cas.

Le CSS tout comme l'affichage du débogger et qui correspond l'affichage ( invalide?) comprend :
nota : en rouge les attributs ignorés

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* ligne 984 */
media="all"
.site-main .sidebar-inner {
    margin-right: 70px;
    float: right;
    max-width: 1040px;
    height: 100px;
    width: inherit;

/* ligne 3966 - 4048 */
@media (max-width: 999px)
.sidebar-inner {
    margin: 0 auto; /* sur mobile le sidebar-inner passe sous le contenu et doit être centré */
    float: none;
}
L'anomalie que je ne comprend pas est l'ordre de prise en compte :

Détails du paramétrage
A l'exécution les attributs margin et float définis après les paramètres écran standard (max-width > 1000) ne sont pas pris en compte pour l'élément défini et l'ordre d'affichage du CSS est .
Par il le sont pour d'autres.

Configuration générale :
Le mobile LG G4 (pixels 2560 x 1440) est vu, dans le rapport devicePixelRatio qui est de 4, avec:
window.screen.width = 360 window.screen.height = 640 en portrait.

L'affichage correspond globalement (sauf autre anomalie non encore vue) au CSS défini pour un media all suivi d'une cascade en fonction de max-width
  1. All
  2. @media (max-width: 1069px)
  3. @media (max-width: 999px)
  4. @media (max-width: 767px)
  5. @media (max-width: 643px)


Pour l'élément unique de classe .sidebar-inner la règle de cascade n'est pas appliquée (pour les définition données ci-dessus dans le CSS) qui apparaissent comme dans le CSS.

Par contre pour l'élément unique de classe .site-title on va trouver un ordre correct :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* index:337 */
.site-title, .site-description {
    color: #7a1e3a;
}

/* style2:4103 */
@media (max-width: 643px)
.site-title {
    font-size: 30px;
}

/* style2:4072 */
@media (max-width: 767px)
.site-title {
    font-size: 36px;
    padding: 8px 0 10px;
}

/* style2:1033 */
.site-title {
    font-size: 60px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
    padding: 58px 0 10px;
}
Où est l'erreur ?

La solution (trouvée grâce à l'effort fait pour communiquer ici) :

Le sélecteur
.site-main .sidebar-inner
défini dans All

reste prioritaire sur
.sidebar-inner
défini plus loin dans le block @media (max-width: 999px)

Fatigue ? Inattention, j'avais déja 10h de développement....

Cordialement

Trebly



Chrome Android (5.1) 47.0.2526.83 déboggeur sous Windows.