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.
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.
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.
À 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
Vous devez vous connecter pour publier un commentaire.
Vous avez la voie à de nombreuses requêtes de média, le plus que vous devez avoir trois un pour tablette, tablette du paysage et mobile. Généralement comme cela,
CSS
Je suis en désaccord, par exemple: je suis en utilisant Angulaires-Flex-Mise en page avec mon projet et j'ai le besoin de créer mon propre sensibles des points d'arrêt de l'api pour afficher les éléments basés sur la taille du navigateur et les différents points d'arrêt. Mais depuis que je suis également en utilisant Angulaires-Flex-Mise en page, j'ai de la nécessité d'harmoniser leurs points d'arrêt qui sont xs, sm, md, lg, xl. De dire que vous n'avez jamais besoin de plus de 3 points d'arrêt est un avis personnel,pas fait. Même si je n'étais pas essayer de faire correspondre un tiers des cadres des requêtes de média, je reste peut-être le besoin de faire plus que de sm, md, lg.
OriginalL'auteur Mitchell Layzell
Le code css pour le portrait et paysage:
Ou, comme écrit par Mitch Layzell,
vous pouvez utiliser ceci:
Si vous le souhaitez, vous pouvez insérer "(orientation paysage)" et "max-width" ou "max-width-périphérique" ensemble.
OriginalL'auteur kampageddon