Blog

Martes, 06 Febrero 2018 10:52

Redefinir código CSS para dispositivos móviles

Esrito por 

Dadas las reducidas dimensiones de los móviles, en ocasiones, lo que queremos es que la página web se presente en los móviles con otro aspecto diferente. Lo que tenemos que hacer es reconfigurar el código CSS, para que cuando detecte el dispositivo móvil, se utilicen dichos códigos. 

Por ejemplo:

En casos de dispositivos con ventana (la parte de la pantalla / papel donde se procesa el documento) con anchuras entre 400 y 700 píxeles las reglas CSS son las siguientes:

@media screen and (min-width: 400px) and (max-width: 700px) {   

body{  

background-color:#555;  

font-family: Times New Roman;  
}  
header h3{  
        text-align:center;  
 }   

Si lo que tenemos es un dispositivo móvil con una anchura de 800px, entonces el código a aplicar sería este 

@media screen and (device-width: 800px) { /*Reglas CSS*/ } 

 

Y en el caso de dispositivos con una altura de 600px, entonces utilizamos el siguiente código.

@media screen and (device-height: 600px) { /*Reglas CSS*/ } 

 

También podemos detectar la orientación del dispositivo, con el valor orientation:

El valor de “orientation” es ‘portrait’ (retrato) cuando el valor de la altura del medio de salida es mayor o igual al valor de la anchura de ese medio. De lo contrario el valor es ‘landscape’ (paisaje).

@media all and (orientation:portrait) { /*Reglas CSS*/ }  
@media all and (orientation:landscape) { /*Reglas CSS*/ } 

Leer 4417 times Last modified on Martes, 06 Febrero 2018 12:39

Sobre CNERIS

CNERIS es una empresa constituida por jóvenes emprendedores procedentes de diferentes sectores del mundo de la información. Nuestro equipo está compuesto por programadores, administradores de sistemas, administradores de base de datos, diseñadores gráficos, maquetadores,