6
Estoy tratando de configurar un tema de WordPress responsivo básico. Para empezar, agarré el tema de la caja de herramientas de wordpress.org y agregué twitter bootstrap responsive css/js.Responsive CSS para teléfonos/pantallas pequeñas
Agregué algunos estilos de prueba básicos, solo para reducir el relleno en pantallas más pequeñas y cambiar el color para indicar que está funcionando. Por algún motivo, los estilos para teléfonos de paisaje no funcionan.
Puede ver mi sitio here.
Mi código CSS responde:
/* 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;
}
}
No sólo el paisaje teléfono, tampoco está funcionando en paisaje de tableta pequeña (800x600), retrato de tableta (768x1024), paisaje de tableta (1024x768) – defau1t
@refhat bueno, esto fue solo un comienzo (los tamaños son en realidad del guía de arranque responsive). No tengo reglas para los tamaños que mencionaste, pero sí tengo una regla que debe cubrir los teléfonos (<481px de ancho) y no puedo entender por qué no está funcionando. – MrGlass
las reglas que mencioné, no necesita preocuparse por ellas solo asegúrese de que estos tramos se agreguen a 12 según Twitter bootstrap. En cuanto a su regla que no cubre/funciona el/en iphones (481px). Significa que no has configurado correctamente el punto de interrupción de mediaquery. – defau1t