6
Ich versuche, ein einfaches responsives Wordpress-Theme einzurichten. Um anzufangen, griff ich das Toolbox-Thema von wordpress.org und fügte twitter bootstrap responsive css/js hinzu.Responsive CSS für Telefone/kleine Bildschirme
Ich habe einige grundlegende Teststile hinzugefügt, nur um die Auffüllung auf kleineren Bildschirmen zu reduzieren und die Farbe zu ändern, um anzuzeigen, dass sie funktioniert. Aus irgendeinem Grund funktionieren die Stile für Landschaftstelefone nicht.
Sie können meine Website here anzeigen.
Mein reaktions CSS-Code:
/* Large desktop */
@media (min-width: 1200px) {
body {
padding-left: 50px;
padding-right: 50px;
color: green;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1199px) {
body {
padding-left: 30px;
padding-right: 30px;
color: purple;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
color: blue;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
body {
padding-left: 5px;
padding-right: 5px;
color: red;
}
}
Nicht nur Landschaft Telefon, es funktioniert auch nicht auf Kleine Tablet-Landschaft (800x600), Tablet-Porträt (768x1024), Tablet-Landschaft (1024x768) – defau1t
@refhat gut, das war nur ein Anfang (die Größen sind eigentlich von ihm Responsive Bootstrap-Anleitung). Ich habe keine Regeln für die Größen, die Sie erwähnt haben, aber ich habe eine Regel, die Telefone (<481px breit) abdecken sollte und ich kann nicht herausfinden, warum es nicht funktioniert. – MrGlass
die Regeln, die ich erwähnt habe, müssen Sie sich nicht darum kümmern, nur sicherstellen, dass diese Spannen 12 per Twitter Bootstrap hinzufügen. Soweit deine Regel das/die iphones nicht abdeckt/bearbeitet (481px). Dies bedeutet, dass Sie den mediaquery-Haltepunkt nicht richtig gesetzt haben. – defau1t