0

Quiero saber cómo puedo usar las media queries pero en javascript para poner en funcionamiento un codigo pero una dimensión específica

// ACTIVAR ESTE SCRIPT EN UNA DIMENSIÓN DE 700PX DE ANCHO
function texto() {
var edit = "Estás en un movil";
document.getElementById("caja").innerHTML = edit;
}
.caja{
color: #fff;
background-color: #ff0000;
}
<div id="caja" class="caja">Estás en una pc</div>

2 respuestas 2

0

Puedes hacer con el evento onresize para calcular el ancho y alto de la pantalla, de esta manera al ser menor a 700px aparecerá el texto que le indique que se encuentra en un móvil, cualquier duda hazla saber.

let edit = "Estás en un movil";

window.onresize = function(event) {

    if(innerWidth < 700){
    document.getElementById("caja").innerHTML = edit;
    }else{
    document.getElementById("caja").innerHTML = 'Estás en una pc';
    }
};
.caja{
color: #fff;
background-color: #ff0000;
}
<div id="caja" class="caja">Estás en una pc</div>

0

Puedes usar matchMedia este objeto te permite hacer media queries css nativas en javascript

adjunto ejemplo:

if(matchMedia("(min-width: 1200px)").matches){
   console.log("tu probablemente estas en un ordenador de escritorio")
}

Debes escribir la media querie como si estuvieses en css, el atributo matches devolvera true o false dependiendo de si la media querie resulto ser verdadera o no y pim pam pum ahi esta tu media querie en javascript

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.