CSS media queries para dispositivos móviles (smartphones)

/* ----------- 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 */
}