Media Queries überschreiben nicht native-Formate?
Frage ich mich, warum einige meiner media queries überschreiben nicht die native Stile in der view-port Ihres seins genannt. Ich bin versucht zu restyle ein Menü dementsprechend, zu stapeln, und die Navigations-Bereich ist die Höhe, mehr in ein WP-theme. Aber jeder, welchen Weg ich die specs, die ich anlegen um diesen Effekt zu bekommen über die Bearbeitung der Live-CSS in Safari oder FF, element untersuchen - die Stile, die ich einfügen unter bestimmten viewport ich bin targeting nicht gelesen. Ich weiß, ich bin mit media queries korrekt, wie es liest NEUE Stile, nur nicht überschreiben native? Ich bin hier etwas fehlt? Hier ist, was ich bin versucht hinzuzufügen, dass nicht gelesen wird.
@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: Hier ist die VOLL set von Responsive Stile, die ich rufe, wenn Angelegenheiten.
/* =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; }
}
- Sie sagen, dass es nicht funktioniert, aber hast du eigentlich getestet, dass auf einem Gerät? Du hast nur erwähnt, dass es nicht überschreiben die Stile in Chrome oder Firefox - im Allgemeinen denke ich, 'min-device-width" funktioniert nur auf einem Gerät und nicht im "desktop-browser".
- Guter Punkt. Aber getestet hab ich mit "Safari Resizer" - die ich war sagte, war identisch mit dem iPad in den richtigen Auflösungen. Und auch beliebten Emulatoren wie iPadpeek. Diese sollte etwas genauer richtig?
- Ich denke, dass
Safari Resizer
betrifft nur die browser-Auflösung und ermöglicht Ihnen das erstellencustom presets
und nicht ändern, wieMedia Queries
interpretiert werden, überprüfen Sie bitte meine Antwort - Ich werde versuchen, um zu sehen, wenn es macht auf den Geräten, sobald ich kann, und halten die Frage aktualisiert. ABER, ich bin verwirrt, wie einige Medien-Anfragen zeigen, mit Fenster Größe ändern.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den
CSS
code aus deinem Beitrag funktioniert nicht, weil es ist ein Gerät-spezifischen Stil angezeigt, und Sie werden sehen, es auf eine Safari, Chrome oder Firefox mit einem laptop/desktop. Du vergisst, dassMedia Queries
geben Ihnen die Möglichkeit, verschiedene Stile, wenn eine Seite angezeigt wird, in einem 'browser' - Größe 480px und auf ein iPhone (was hat ein max-device-width von 480px).Beispiel-CSS:
Im obigen Beispiel können Sie als Ziel und haben noch einen separaten Stil für Ihr Gerät der Wahl. Wenn Sie möchten, um es zu testen in einem
browser
verwenden Sie einfach diemin-width
odermax-width
Eigenschaften.Hoffe, das hilft.
Auf dem oberen Beispiel fehlt schließende Klammer.