web-dev-qa-db-fra.com

@Media min-width & max-width

J'ai cette configuration @media:

HTML:

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

CSS:

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

Avec cette configuration, cela fonctionne sur l'iPhone mais pas dans le navigateur.

Est-ce parce que j'ai déjà device dans la méta et peut-être que max-width:480px à la place?

cssmobilemedia-queries
199
rallybilen

J'ai trouvé la meilleure méthode consiste à écrire votre CSS par défaut pour les navigateurs plus anciens, tels que les navigateurs plus anciens, notamment 5.5, 6, 7 et 8. Ne peut pas lire @media. Quand j'utilise @media, je l'utilise comme ceci:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Mais vous pouvez faire ce que vous voulez avec votre @ media. Ceci est juste un exemple de ce que j'ai trouvé le mieux pour moi lors de la création de styles pour tous les navigateurs.

Spécifications CSS pour iPad.

Aussi! Si vous recherchez une imprimabilité, vous pouvez utiliser @media print{}

307
sourRaspberri

Le problème sous-jacent utilise max-device-width vs tout à fait ancien max-width.

L'utilisation du mot clé "device" cible la dimension physique de l'écran et non la largeur de la fenêtre du navigateur.

Par exemple:

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

Versus

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}
33
jpostdesign

La valeur correcte pour l'attribut content doit inclure initial-scale à la place:

<meta name="viewport" content="width=device-width, initial-scale=1">
                                                   ^^^^^^^^^^^^^^^
8
Ksenia Titova

Si le comportement de site Web sur de petits appareils comme l'écran de bureau, vous devez mettre cette balise méta en en-tête avant

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

Pour les requêtes multimédia, vous pouvez définir ceci comme

@media only screen and (max-width: 600px) and (min-width: 400px)  {
//Put your CSS here for 400px to 600px width devices //
}
3
Rohit Kaushik