6
Próbuję ustawić podstawowy motyw responsywny. Na początek złapałem motyw skrzynki narzędziowej z wordpress.org i dodano twitter bootstrap responsywnego css/js.Responsywny styl CSS dla telefonów/małych ekranów
Dodałem kilka podstawowych stylów testowych, aby zmniejszyć dopełnienie na mniejszych ekranach i zmienić kolor, aby wskazać, że działa. Z jakiegoś powodu style telefonów krajobrazowych nie działają.
Możesz przeglądać moją witrynę here.
mój czuły kod CSS:
/* 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;
}
}
nie tylko krajobraz nie działa również na małym krajobrazie tabletu (800x600), portretie tabletu (768x1024), krajobrazie tabletu (1024x768) – defau1t
@refhat dobrze, to był tylko początek (rozmiary są w rzeczywistości od niego responsywny przewodnik ładowania początkowego). Nie mam reguł dotyczących wymiarów, o których wspomniałeś, ale mam regułę, która powinna dotyczyć telefonów (<481 pikseli) i nie mogę zrozumieć, dlaczego to nie działa. – MrGlass
Zasady, o których wspomniałem, nie musisz się nimi przejmować, tylko upewnij się, że te rozpiętości dodają do 12 na twitter bootstrap. Jeśli chodzi o reguły, które nie obejmują/działają na/on iphones (481px). Oznacza to, że nie ustawiłeś poprawnie punktu przerwania tekstu. – defau1t