web-dev-qa-db-fra.com

La requête multimédia réactive ne fonctionne pas dans Google Chrome

J'ai écrit un morceau de code CSS pour changer la largeur de la mise en page de mon site en fonction de la largeur de l'écran de l'utilisateur. Si l'utilisateur dispose de moins d'espace d'écran, la largeur de la mise en page augmente pour remplir davantage la fenêtre et laisser moins d'espace, et s'il a plus d'espace, la mise en page se rétrécit pour conserver un aspect attrayant.

J'utilise le code suivant pour y parvenir:

#bg{
    background:-webkit-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:-moz-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:-o-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    margin-left:auto;
    margin-right:auto;
    margin-bottom:1.6rem;
    border-width:0 0.1rem 0.1rem 0.1rem;
    border-style:solid;
    border-color:#303030 #101010 #000;
    border-radius:0.8rem;
    min-width:94.2rem
}

@media (min-width: 70rem){
    #bg{
        border-radius:4px;
        border-radius:0.4rem;
        width:90%
    }

}

@media (min-width: 91rem){
    #bg{
        width:80%
    }

}

@media (min-width: 112rem){
    #bg{
        width:70%
    }

}

Cela fonctionne très bien dans Firefox 30, mais Google Chrome affiche toujours l'élément à 70% de largeur.

Auparavant, j'avais également utilisé max-width dans les requêtes, auquel cas Chrome ferait l'inverse; il afficherait toujours l'élément à 90% , peu importe combien je redimensionne la fenêtre du navigateur.

Les règles sont compilées à l'aide de SASS. Quel est exactement le problème ici? Comment puis-je modifier la requête pour qu'elle fonctionne dans tous les navigateurs?

Le site Web concerné peut être trouvé à ce lien .

cssgoogle-chromefirefoxwidthmedia-queries
13
ividyon

ajoutez cette ligne dans <head>

<meta name="viewport" content="width=device-width,initial-scale=1">
41
Hassan Raza

Vous pouvez l'ajuster à vos besoins

// css for mobile here
// ...

/* desktop */
@media (min-width: 900px) and (orientation: landscape)
{
    // css for desktop here
    // ...
}

Et n'oubliez pas

<meta name="viewport" content="width=device-width, initial-scale=1">
1
Baked Inhalf
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            background:green;
        }
        @media only screen and (max-width: 500px) {
            body{
                background:yellow;
            }
        }
    </style>
</head>
<body>

</body>
</html>
1
Nikit Barochiya

Voyez si cette syntaxe plus habituelle fonctionne mieux:

@media screen and (min-width: 112rem){ ... }
1
ralph.m

Tous sont corrects, mais Chech this

@media only screen and (min-width : 320px) {...}

NE PAS

@media screen et (min-width: 320px) {...}

/*==========  Mobile First Method  ==========*/

        /* Custom, iPhone Retina */ 
        @media only screen and (min-width : 320px) {

        }

        /* Extra Small Devices, Phones */ 
        @media only screen and (min-width : 480px) {

        }

        /* Small Devices, Tablets */
        @media only screen and (min-width : 768px) {

        }

        /* Medium Devices, Desktops */
        @media only screen and (min-width : 992px) {

        }

        /* Large Devices, Wide Screens */
        @media only screen and (min-width : 1200px) {

        }



        /*==========  Non-Mobile First Method  ==========*/

        /* Large Devices, Wide Screens */
        @media only screen and (max-width : 1200px) {

        }

        /* Medium Devices, Desktops */
        @media only screen and (max-width : 992px) {

        }

        /* Small Devices, Tablets */
        @media only screen and (max-width : 768px) {

        }

        /* Extra Small Devices, Phones */ 
        @media only screen and (max-width : 480px) {

        }

        /* Custom, iPhone Retina */ 
        @media only screen and (max-width : 320px) {

        }
0
karthick nagarajan

veuillez fermer votre code avec ';' et essayez ceci

@media (min-width: 70rem){
#bg{
    border-radius:4px !important;
    border-radius:0.4rem !important;
    width:90% !important;
}
0
Aadol Rrashid