Autor
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.$(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>
Código:
<style>
@media screen an (max-width:600px){
#dia1{
content: "D";
}
#dia2{
content: "L";
}
#dia3{
content: "M";
}
.
.
.
}
</style>
Pero, tampoco funciona...@media screen an (max-width:600px){
#dia1{
content: "D";
}
#dia2{
content: "L";
}
#dia3{
content: "M";
}
.
.
.
}
</style>
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){...}
});
oif(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){...}
});
if((window.matchMedia("(max-width:768px)").matches) || (window.matchMedia("(max-width:600px)").matches) = true){...}
});
Gracias de antemano.
En línea
