• Daniel Esparza
  • Plugins
  • Contacto
< Daniel Esparza />
  • Diseño web
  • Tiendas online
  • Web Apps
  • Plataforma de Delivery
  • Más
    • WordPress
    • WooCommerce
    • Shortcodes
    • CSS
Colorear el fondo de un checkbox al seleccionar
marzo 31, 2020
CSS media queries para Tablets
marzo 31, 2020

CSS media queries para dispositivos móviles (smartphones)

Este practico tutorial para CSS "CSS media queries para dispositivos móviles (smartphones) (con CSS)", te hará maquetar correctamente y más rápido tus proyectos sin necesidad de conocimientos avanzados, asegúrate de insertar el código en el archivo style.css del tema activo en tu sitio web (de preferencia en el tema hijo "Child Theme").

/* ----------- dispositivos móviles ----------- */
/* cambios css para modo vertical y horizontal */
@media only screen and (min-width: 320px)  and (max-width: 736px) {
  /* inserta aquí tu código */
}
 
/* cambios css solo para modo vertical */
@media only screen and (min-width: 320px) and (max-width: 736px)  and (orientation: portrait) { 
  /* inserta aquí tu código */
}
 
/* cambios css solo para modo horizontal */
@media only screen and (min-width: 320px) and (max-width: 736px)  and (orientation: landscape) 
{ 
  /* inserta aquí tu código */
}

/*
Si deseas que los cambios se vean solo en los dispositivos móviles utilizamos la propiedad «device»
*/

/* ----------- dispositivos móviles ----------- */
/* cambios css para modo vertical y horizontal */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) {
  /* inserta aquí tu código */
}
 
/* cambios css solo para modo vertical */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: portrait) { 
  /* inserta aquí tu código */
}
 
/* cambios css solo para modo horizontal */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) { 
  /* inserta aquí tu código */
}

Si estás buscando más tutoriales, trucos y tips útiles para WordPress, crear un blog, sitio web o tienda online de éxito, no olvides visitar las otras categorías:
CSS Shortcodes WooCommerce WordPress

Más información sobre como desarrollar en WordPress, visita el Codex oficial de WordPress en español: clic aquí
Más información sobre como desarrollar en WordPress (cursos): clic aquí
Más información sobre como desarrollar plantillas (Templates) en WordPress: clic aquí
Más información sobre como desarrollar Plugins en WordPress: clic aquí
Más información sobre como desarrollar Shortcodes en WordPress: clic aquí
Más información sobre como desarrollar en WooCommerce, visita el Codex oficial de WooCommerce: clic aquí

Si necesitas consultoría en WordPress, WooCommerce o desarrollo de Plugins envíame un mensaje.

Compartir
Donar
Volver a la categoría: CSS
Autor: danielesparza.studio
Etiquetas: css filtros funciones ganchos media móvil queries smartphone tips trucos tutorial wordpress
Servicios: Diseño web, Tiendas online, Web Apps, Plataforma de Delivery
#danielesparzastudio

¿Tienes un reto?

Colaboró directamente con negocios para desarrollar proyectos y también de manera independiente como freelance para apoyar agencias de diseño, marketing y publicidad…
#danielesparzastudio

¿Desarrollamos algo juntos?

©2020 Daniel Esparza, inspirado por #openliveit #dannydshore
    • Daniel Esparza
    • Plugins
    • Contacto
    X

    [email protected]

    Social