CSS media queries para Tablets

CSS media queries se entiende como un módulo de CSS que permite adaptar la representación gráfica del contenido web a las características del dispositivo, en este caso la resolución. En el siguiente código podemos conocer el CSS genérico para Tablets.

Para hacer uso del siguiente código solo debes colocarlo dentro de tu hoja de estilos.

Si deseas que los cambios se vean tanto en web como en los dispositivos móviles utiliza el siguiente código:

/* ----------- Tablets ----------- */
/* cambios css para modo vertical y horizontal */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px)
{
  /* inserta aquí tu código */
}

/* cambios css solo para modo vertical */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
  and (orientation: portrait) 
{ 
  /* inserta aquí tu código */
}

/* cambios css solo para modo horizontal */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
  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» y la insertamos en el código:

/* ----------- Tablets ----------- */
/* cambios css para modo vertical y horizontal */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px)
{
  /* inserta aquí tu código */
}

/* cambios css solo para modo vertical */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
{ 
  /* inserta aquí tu código */
}

/* cambios css solo para modo horizontal */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
{ 
  /* inserta aquí tu código */
}

Si deseas más información sobre como desarrollar en

CSS en español

, visita Mozilla Developer Network haciendo clic aquí.

Si necesitas consultoría sobre

CSS

envíame un correo a hola@dannydshore.com o haciendo clic aquí.

#conceptos #wordpress #woocommerce #shortcodes #css