CSS media queries pour masquer et afficher les éléments de page .

Je suis un peu nouveau pour le codage avec les media queries, et je pense que j'ai peint moi-même dans un coin, en utilisant trop de requêtes de média (et probablement dans le mauvais sens).

Ce que je veux faire est de cacher certains éléments de la page lorsque la largeur de l'écran ou l'appareil est plus petit que 481px. Ainsi, dans la capture d'écran ci-dessous, vous pourriez être en mesure de voir le couple de lignes de texte dans le coin supérieur droit.

CSS media queries pour masquer et afficher les éléments de page .

Mon problème a à voir avec les requêtes de média que j'ai utilisé. Je suis au bout du rouleau à la figure (1) pourquoi les éléments de la page (ces deux lignes de texte dans le coin supérieur droit) ne sont pas en train de disparaître lorsque la page est plus petite que 481px OU (2) pourquoi ils n'apparaissent pas dans n'importe quel plus grand écran/appareil tailles quand je n'ai réussi à obtenir les éléments de la page à disparaître.

Voici le morceau de code CSS qui semble causer quelques problèmes:

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px){
   /* Hiding elements for this device * * * * * * * * * * * * * */
   /*
      .poweredBy{
         display: none;
      }
   */
 }

Avec ce code commenté, ces deux lignes de texte ne disparaîtra pas jusqu'à ce que la fenêtre (appareil?) la largeur est quelque part autour de 320px.

CSS media queries pour masquer et afficher les éléments de page .

Ici est l'ensemble de la CSS:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.poweredBy{
display: none;
}
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px){
.poweredBy{
display: none;
}
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
.poweredBy{
display: none;
}
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
/* iPad 3 ---------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {}
/* 960px layouts ----------- */
@media only screen and (min-width : 960px){}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {}

Je suis en utilisant GroundworkCSS en dessous, mais j'ai ajouté un peu de requêtes de média de moi-même -- qui était probablement pas un illuminé agir en mon nom. Alors si quelqu'un pouvait me diriger dans la bonne direction, je vous en serais très reconnaissant. Merci.

Je ne recommande pas cela comme une solution à long terme, mais ne l'ajout !d'une grande aide à tous? Si oui, il pourrait être un sélecteur de hiérarchie question.
À mon avis vous êtes à l'aide de voie à de nombreuses questions des médias, vous n'avez pas à obtenir aussi spécifique que vous obtenez. J'ai eu du succès à l'aide de media (max-width: 767px) { } pour tous les téléphone mobile code (à l'occasion je peut écrire un pour max-width 500ish pour les petits téléphones selon le code) et media (max-width: 1024px) et (min-largeur: 768) pour tous les appareils de la tablette. De cette façon, vous devriez obtenir beaucoup moins de conflits et ont l'habitude d'utiliser la redoutable !important
blog.cloudfour.com/... et designshack.net/articles/css/...
McFee - Vous avez raison sur l'argent. J'ai regardé Bootstrap Responsive et ont pris leurs 4 requêtes de média / points d'arrêt. J'ai maintenant mon travail de mise en page comme je le voulais travailler. Je vous remercie.

OriginalL'auteur Ace | 2013-10-15