@Media largeur min et largeur max

225

J'ai cette @mediaconfiguration:

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 cela ne fonctionne pas dans le navigateur.

Est-ce parce que je l'ai déjà devicedans la méta, et peut-être à la max-width:480pxplace?

css mobile media-queries rallybilen
la source
1
Quel est le problème - Les styles par défaut seront applicables aux écrans de plus de 769 px.
Gurpreet Singh
il suffit de supprimer les @media screen and (min-width:769px){styles de navigateur habituels
Zoltan Toth
Que voulez-vous dire Zoltan? Et je pense que je pourrais le résoudre. Tout d'abord, le problème était lorsque j'ai redimensionné mon navigateur avec max-device-avec cela fonctionnait sur le téléphone mais pas dans le navigateur, sans "device" cela fonctionne dans les deux.
rallybilen
Donc, fondamentalement, sans le "périphérique", cela fonctionne à la fois sur mobile / navigateur, mais lorsque j'ajoute un périphérique, je ne peux pas le voir dans le navigateur \
rallybilen
1
Ce ne devrait 980pxpas être le cas, 960car la taille du navigateur se termine à 980px.

Réponses:

339

J'ai trouvé que la meilleure méthode consiste à écrire votre CSS par défaut pour les anciens navigateurs, car les anciens navigateurs, y compris les versions 5.5, 6, 7 et 8. Impossible de lire @media. Lorsque 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, ce n'est qu'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 iPad.

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

bashleigh
la source
16
Pourquoi avez-vous mis des écrans «mac»? Ce ne sont pas seulement des Mac "incroyables" qui peuvent avoir de grands écrans haute résolution!
Luke
38

Le problème sous-jacent consiste à utiliser max-device-widthvs plain old max-width.

L'utilisation du mot clé "appareil" 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 */
}

Contre

@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.  */
}
jpostdesign
la source
11

Si le site Web utilise un petit appareil comme un écran de bureau, vous devez mettre cette balise META dans l'en-tête avant 

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

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

cela couvrira toutes vos largeurs de mobile / téléphone portable

    @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //

    }

Pour iPad et iPad pro, vous devez utiliser 

    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    //Put your CSS here for 768px to 1024px width devices(covers all iPad portrait width //

    }

Si vous souhaitez ajouter css pour le mode paysage, vous pouvez ajouter ceci

et (orientation: paysage)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscape) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile landscape width //

        }
Rohit Kaushik
la source
8

La valeur correcte de l' contentattribut doit inclure à la initial-scaleplace:

<meta name="viewport" content="width=device-width, initial-scale=1">
                                                   ^^^^^^^^^^^^^^^
Développer l'extrait

Ksenia Titova
la source
2
Si vous pouviez expliquer pourquoi et ajouter des références, cela rendrait cette réponse plus utile.
Michael Benjamin
2
@Michael_B L'initiale était «évolutive par l'utilisateur = non». Cela dit tout ce que je pense.
Apolo Radomer
0

pour certains iPhone, vous devez mettre votre fenêtre comme celle-ci

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />
NuggaN85
la source