Les supports sensibles requête ne fonctionne pas sous Google Chrome

J'ai écrit un bout de code CSS de manière fluide à changer ma mise en page du site de la largeur en fonction de la largeur de l'écran. Si l'utilisateur a moins de l'écran de l'immobilier disponibles, la mise en page de la largeur augmente pour remplir plus de la fenêtre et laisser moins d'espace, et si ils ont plus d'espace, la mise en page se rétrécit à maintenir un aspect attrayant.

J'utilise le code suivant pour obtenir ce:

#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, cependant, Google Chrome toujours affiche l'élément à 70% de la largeur.

Auparavant, j'avais aussi utilisé max-width dans les requêtes, dans lequel cas, google Chrome serait de faire l'inverse de la chose; il serait toujours afficher l'élément à 90%, peu importe combien j'ai de redimensionner la fenêtre du navigateur.

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

Le site web affecté peut être trouvé sur ce lien.

Pourriez-vous s'il vous plaît montrer un extrait de DOM structure? Avez-vous regardé le compilé CSS si c'est valide?
Je ne suis pas sûr de savoir comment faire un standalone exemple de la structure du site, comme il est un peu plus complexe, mais j'ai ajouté un lien vers le site en question. Aussi, le code que vous voyez est la compilation des feuilles de style CSS.

OriginalL'auteur ividyon | 2014-06-21

22

ajouter cette ligne dans <head>
```
<meta name="viewport" content="width=device-width,initial-scale=1">
```
Cela n'a aucun effet sur les navigateurs de bureau.
pouvez-vous m'envoyer svp le lien de votre site web
La question a été posté il y a 3 ans. Je suis assez sûr que ils ont résolu le problème ou a abandonné le projet. Et il y a est un lien vers le site en question.

OriginalL'auteur Hassan Raza
1

Voir si cette syntaxe habituelle fonctionne mieux:
```
@media screen and (min-width: 112rem){ ... }
```
Merci pour les plus de bonne syntaxe, cependant, cela ne résout pas le problème sur Chrome.
Viens de remarquer que vous avez ajouté un lien. Ces requêtes de média fonctionnent très bien dans Chrome (Mac) pour moi.

OriginalL'auteur ralph.m

<!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>

OriginalL'auteur Nikit Barochiya

Toutes les réponses sont bonnes, mais Chech cette

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

PAS

@media screen and (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) {

        }

OriginalL'auteur karthick nagarajan

veuillez fermer votre code avec le ';' et essayez ce

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

OriginalL'auteur Aadol Rrashid

Vous pouvez modifier cette page à 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">

OriginalL'auteur Baked Inhalf

Vous devez vous connecter pour publier un commentaire.