Les Media Queries ne prévalent pas natif de styles?
Je me demandais pourquoi certains de mes requêtes de média ne sont pas prépondérantes, le natif de styles à la vue du port de leur appelé. Je suis en train de relooker un menu de réactivité, de la pile, et d'avoir la zone de navigation de la hauteur de plus dans un thème WP. Mais dans tous les sens-je ajouter les specs, j'ai créer pour obtenir cet effet par l'édition de Vivre CSS dans Safari ou FF inspecter l'élément - les styles-je insérer vertu de la fenêtre d'affichage, je suis de ciblage ne sont pas en cours de lecture. Je sais que je suis en utilisant des requêtes de média comme on le lit de NOUVEAUX styles, de ne pas remplacer les indigènes? Je suis absent quelque chose ici? Voici ce que j'essaye d'ajouter que de ne pas lire.
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#access li {
float:none; //To translate to not to float to the left stack
position:relative;
}
#access {
background:url("http://testsite.com/wp-content/uploads/2012/01/menu_bg.gif") repeat scroll 0 0 transparent;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);
clear:both;
display:block;
float:left;
height:240px; //Changed the height to allow stack
width:100%;
}
Edit: Voici la PLEIN ensemble de Réactif styles je vais appeler, si les questions.
/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
body {
padding: 0;
}
#page {
margin-top: 0; overflow: hidden;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
#socialpost { margin-left: -100px; }
p {font-size: 12px; }
#sublogo { display: none; }
#footcontain { padding-left: 0;}
#access a {
color: #000000;
display: block;
font-family: arial;
line-height: 3.11em;
padding: 0 20px;
text-decoration: none;
#access a { font-size: 12px; }
#access li {
float: left;
margin-left: -28px;
position: relative; }
}
@media (max-width: 650px) {
/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
body {
padding: 0;
}
#page {
margin-top: 0;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 12px; }
#sublogo { display: none; }
#access a {
color: #000000;
display: block;
font-family: arial;
line-height: 3.11em;
padding: 0 13px;
text-decoration: none;
font-size: 11px;}
#footcontain { padding-left: 0;}
#access a {
padding: 0 15px; }
}
@media (max-width: 450px) {
#content .gallery-columns-2 .gallery-item {
width: 45%;
padding-right: 4%;
}
#content .gallery-columns-2 .gallery-item img {
width: 100%;
height: auto;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 10px; }
.entry-content, .entry-summary {
padding: 1.625em 0 0;
width: 48%; }
#footcontain { padding-left: 0;}
#branding #s {
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
float: right;
height: 35px;
width: 47px; }
.widget-title { margin-top: 35px; }
.flexslider .slides img {
border: 0 none;
display: block;
max-width: 100%;
padding-bottom: 25px; }
#footcontain { display:none;}
#access li {
float: none;
position: relative;
}
#access {
height: 70px;
}
#access a {
color: #000000;
display: block;
font-family: arial;
font-weight: bolder;
line-height: 3.11em;
padding: 0 10px;
text-decoration: none;
}
#access ul {
font-size: 10px;
list-style: none outside none;
margin: 0 0 0 -80px;
padding-left: 0;
}
.flex-control-nav { display: none; }
.flexslider {
margin: 0 0 67px; }
.flex-caption { display: none; } //Could Display this here, need to make take half of slider
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body { padding: 0; }
#access {
height: 70px;
}
#page {
margin-top: 0; overflow: hidden;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 10px; }
#sublogo { display: none; }
#access a { padding: 0 10px; }
#access li {
float: none;
position: relative;
}
.entry-content, .entry-summary {
padding: 1.625em 0 0;
width: 35%; }
#footcontain { display: none; }
#branding #s {
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
float: right;
height: 35px;
width: 47px; }
#footcontain { display: none; }
.widget-title { margin-top: 35px; } //Attempt to Create Space for Slider Page Nation
#access { height: 70px; }
#access li {
float: none;
position: relative;
}
.flex-control-nav { display: none; }
.flex-caption { display: none; } //Could Display this here, need to make take half of slider, check
.flexslider {
margin: 0 0 67px; }
}
Grand point. Mais je l'ai testé à l'aide de "Safari Resizer" - qui m'a dit était identique à l'iPad sur les bonnes résolutions. Et également utilisé populaires des émulateurs comme iPadpeek. Ceux-ci devraient être un peu précis?
Je pense que
Safari Resizer
n'affecte que la résolution du navigateur et vous permet de créer custom presets
et ne change pas la façon dont Media Queries
sont interprétés, veuillez vérifier ma réponseJe vais essayer de voir si il s'affiche sur les dispositifs dès que je peux, et de garder la question à jour. MAIS, je suis confus que certaines Requêtes de Médias ne montrent avec fenêtre de redimensionnement.
OriginalL'auteur Peter Gibbons | 2012-01-23
Vous devez vous connecter pour publier un commentaire.
La
CSS
code à partir de votre post n'est pas de travail parce que c'est un appareil style spécifique et que vous êtes en train de visionner sur un Safari, Chrome ou Firefox en utilisant un ordinateur portable/de bureau. Vous oubliez queMedia Queries
vous donne la possibilité d'appliquer différents styles lorsqu'une page est affichée dans un navigateur - redimensionnée à 480px et sur un iPhone (qui a un max-device-width de 480px).Exemple CSS:
Dans l'exemple ci-dessus, vous pouvez cibler à la fois et de toujours avoir un style pour votre appareil de choix. Si vous voulez le tester dans un
browser
suffit d'utiliser lamin-width
oumax-width
propriétés.Espère que cette aide.
OriginalL'auteur MonkeyCoder
Sur le haut exemple, il y a un manque crochet de fermeture.
OriginalL'auteur Jannis M