media querie, vue adaptavie , vue du navigateur ,=>grosse différence

Bomber
Les bases HTML/CSS

Bonjour,

Je vous expose ici mon problème de media queries.
Je les ai donc mises en place dans mon css, et lorsque j'utilise des modules de dev , tel que la vue adaptative de firefox, tout ce passe nickel chrome.... mais, lorsque je modifie la largeur de la fenetre de mon navigateur plus aucun style n'est appliqué sous les 1024px....
sachant qu'une media querie prend le relais sous cette largeur.
une idée ?

6 réponses

Nakin
Réponse acceptée

Rien ne fonctionne à partir du moment tu as changé "max-width" et "min-width" par "max-device-width" et "min-device-width".

Nakin

Salut,

Peux-tu afficher ton code CSS et le head de ton fichier HTML stp ?

Bomber
Auteur

Mon html (je suis sous cake php)

<!DOCTYPE html>
    <html>
    <head>
        <?php echo $this->Html->charset(); ?>
        <title>
            <?php echo $this->fetch('title'); ?>
        </title>
        <?php
        echo $this->Html->css('bootstrap');
        echo $this->Html->css('carrousel');
        echo $this->Html->css('personnal');
            echo $this->fetch('meta');
            echo $this->fetch('css');
        ?>
    </head>

pour le css :

     @media only screen and (min-width: 1550px){ /* tout fonctionne*/}
     @media only screen and (min-width:1024px) and (max-width: 1549px){ /* tout fonctionne*/}
     @media only screen and (min-device-width:900px) and (max-device-width:1024px){ /* rien fonctionne*/}
     @media only screen and (min-device-width:768px) and (max-device-width:900px){ /* rien fonctionne*/}
     @media only screen and (min-device-width : 480px) and (max-device-width : 768px){ /* rien fonctionne*/}
       @media only screen and (max-device-width : 480px){ /* rien fonctionne*/}

je ne te mets pas tout ca c'est assez long ^^

Kareylo

Ajoute cette ligne dans ton head 

<meta name="viewport" content="width=device-width, initial-scale=1">
Bomber
Auteur

aucune différence =/

Bomber
Auteur

problème resolu ^^
désolé, grosse erreur d'étourderie. j avais changé les deux premiers mais oublié les autre.
Merci =)