Detectar mobile, tablet o desktop con css


 

El primer paso es crear consultas de medios importantes para su aplicación y objetivos. por ejemplo crearemos tres nuevas media query para detectar escritorio (por default no require un media query), tablet y telefono.

Estableceremos estilos para la etiqueta h1 donde cambiaremos el tamaño de la fuenta si entra en estos 3 dispositivos.

/* default css */
h1{
    color : #858593 ,
    fontSize : 30px;
}
 
/* small desktop */
@media all and (max-width: 1200px) {
    h1{
	    fontSize : 30px;
	}
}
 
/* tablet */
@media all and (max-width: 1024px) {
    h1{
	    fontSize :25px;
	}
}
 
/* phone */
@media all and (max-width: 768px) {
    h1{
	    fontSize : 20px;
	}
}