[SOLUCIONADO] ¿Porque en un window.matchMedia() me funciona y en el otro no?

Hola, tengo una duda:
Estoy haciendo una web, y tengo un calendario php-mysql y lo estoy haciendo responsive por la cual yo quisiera que dónde pone:Lunes,Martes,Miércoles,Jueves... En versión para tablets y moviles quisiera que se ponga reducido (L,M,X,J,V,S,D), para eso puse este código:

Código:

    <script>
      $(document).ready(function(){
        if (window.matchMedia("(max-width:768px)").matches){
          week1 = document.getElementById("dia1");
          week1.innerHTML = "D";
          week2 = document.getElementById("dia2");
          week2.innerHTML = "L";
          week3 = document.getElementById("dia3");
          week3.innerHTML = "M";
          week4 = document.getElementById("dia4");
          week4.innerHTML = "X";
          week5 = document.getElementById("dia5");
          week5.innerHTML = "J";
          week6 = document.getElementById("dia6");
          week6.innerHTML = "V";
          week7 = document.getElementById("dia7");
          week7.innerHTML = "S";           
        }
</script>

Cuyo código es para tablet y en teoría para móvil, pero funciona solamente para tablet en el móvil no me funciona, no se porque, probé de de poner doble función [window.matchMedia()], pero no funciona, y con css.

Código:

<style>
  @media screen an (max-width:600px){
   #dia1{
     content: "D";
   }
   #dia2{
     content: "L";
   }
   #dia3{
     content: "M";
   }
    .
    .
    .
}
</style>

Pero, tampoco funciona...
Que esta pasando?

Se puede poner la funcion

Código:

widow.matchMedia("")

con dos valores?
ej:

Código:

$(document).ready(function(){
    if(window.matchMedia("(max-width:768px) and (max-width:600px)").matches){...}
});

Código:

$(document).ready(function(){
    if((window.matchMedia("(max-width:768px)").matches) || (window.matchMedia("(max-width:600px)").matches) = true){...}
});

Gracias de antemano.