Skip to main content
adicionou 60 caracteres ao conteúdo
Fonte Link
Taffarel Xavier
  • 1,4mil
  • 9
  • 17

Usa o evento onresize (https://www.w3schools.com/jsref/event_onresize.asp). https://www.w3schools.com/howto/howto_js_media_queries.asp

Ele é executado quando a página é redimensionada. Você poderá fazer lógica dentro desse evento.

document.getElementById("getWidthWindow").innerHTML = `Tamanho da página ${window.outerWidth}px.`;


window.onresize = function(ev) {

//Sua implementação do código vai aqui dentro

//Pega o tamanho original da página conforme for redimensionando
let widthPage = ev.currentTarget.outerWidth;

var xx1 = window.matchMedia(`(max-width: ${widthPage}px)`);

documentvar x2 = window.getElementByIdmatchMedia("getWidthWindow""(max-width: 700px).innerHTML")
myFunction(x2) =`[${x// Call listener function at run time
x2.media}]`;addListener(myFunction) // Attach listener function on state changes

}
<p>Redimensiona a página.</p>
<div id="getWidthWindow">matchMedia: </div>

Usa o evento onresize (https://www.w3schools.com/jsref/event_onresize.asp).

Ele é executado quando a página é redimensionada. Você poderá fazer lógica dentro desse evento.

document.getElementById("getWidthWindow").innerHTML = `Tamanho da página ${window.outerWidth}px.`;


window.onresize = function(ev) {

//Sua implementação do código vai aqui dentro

let widthPage = ev.currentTarget.outerWidth;

var x = window.matchMedia(`(max-width: ${widthPage}px)`);

document.getElementById("getWidthWindow").innerHTML =`[${x.media}]`;

}
<p>Redimensiona a página.</p>
<div id="getWidthWindow">matchMedia: </div>

Usa o evento onresize (https://www.w3schools.com/jsref/event_onresize.asp). https://www.w3schools.com/howto/howto_js_media_queries.asp

Ele é executado quando a página é redimensionada. Você poderá fazer lógica dentro desse evento.

document.getElementById("getWidthWindow").innerHTML = `Tamanho da página ${window.outerWidth}px.`;


window.onresize = function(ev) {

//Sua implementação do código vai aqui dentro

//Pega o tamanho original da página conforme for redimensionando
let widthPage = ev.currentTarget.outerWidth;

var x1 = window.matchMedia(`(max-width: ${widthPage}px)`);

var x2 = window.matchMedia("(max-width: 700px)")
myFunction(x2) // Call listener function at run time
x2.addListener(myFunction) // Attach listener function on state changes

}
<p>Redimensiona a página.</p>
<div id="getWidthWindow">matchMedia: </div>

adicionou 85 caracteres ao conteúdo
Fonte Link
Taffarel Xavier
  • 1,4mil
  • 9
  • 17

Usa o evento onresize (https://www.w3schools.com/jsref/event_onresize.asp).

Ele é executado quando a página é redimensionada. Você poderá pegar o tamanho da página e fazer a lógica do seu programadentro desse evento.

document.getElementById("getWidthWindow").innerHTML = `Tamanho da página ${window.outerWidth}px.`;


window.onresize = function(ev) {

//Sua implementação do código vai aqui dentro

let widthPage = ev.currentTarget.outerWidth;

var x = window.matchMedia("`(max-width: "+widthPage+"px${widthPage}px)"`);

//Sua implementação do código vai aqui dentro
document.getElementById("getWidthWindow").innerHTML =`[${x.media}]`;
//ev.currentTarget.outerWidth pega o tamanho à medida que 

}
<p>Redimensiona a página.</p>
<div id="getWidthWindow">Tamanho da Páginaid="getWidthWindow">matchMedia: </div>

Usa o evento onresize (https://www.w3schools.com/jsref/event_onresize.asp).

Ele é executado quando a página é redimensionada. Você poderá pegar o tamanho da página e fazer a lógica do seu programa.

document.getElementById("getWidthWindow").innerHTML = `Tamanho da página ${window.outerWidth}px.`;


window.onresize = function(ev) {

let widthPage = ev.currentTarget.outerWidth;

var x = window.matchMedia("(max-width: "+widthPage+"px)");

//Sua implementação do código vai aqui dentro
document.getElementById("getWidthWindow").innerHTML =`[${x.media}]`;
//ev.currentTarget.outerWidth pega o tamanho à medida que 

}
<p>Redimensiona a página.</p>
<div id="getWidthWindow">Tamanho da Página: </div>

Usa o evento onresize (https://www.w3schools.com/jsref/event_onresize.asp).

Ele é executado quando a página é redimensionada. Você poderá fazer lógica dentro desse evento.

document.getElementById("getWidthWindow").innerHTML = `Tamanho da página ${window.outerWidth}px.`;


window.onresize = function(ev) {

//Sua implementação do código vai aqui dentro

let widthPage = ev.currentTarget.outerWidth;

var x = window.matchMedia(`(max-width: ${widthPage}px)`);

document.getElementById("getWidthWindow").innerHTML =`[${x.media}]`;

}
<p>Redimensiona a página.</p>
<div id="getWidthWindow">matchMedia: </div>

adicionou 85 caracteres ao conteúdo
Fonte Link
Taffarel Xavier
  • 1,4mil
  • 9
  • 17

Usa o evento onresize (https://www.w3schools.com/jsref/event_onresize.asp).

Ele é executado quando a página é redimensionada. Você poderá pegar o tamanho da página e fazer a lógica do seu programa.

document.getElementById("getWidthWindow").innerHTML = `Tamanho da página ${window.outerWidth}px.`; 


window.onresize = function(ev) { 

let widthPage = ev.currentTarget.outerWidth; 

var x = window.matchMedia("(max-width: "+widthPage+"px)");

//Sua implementação do código vai aqui dentro
document.getElementById("getWidthWindow").innerHTML =
`Tamanho da página $=`[${widthPage}pxx.`;media}]`;
//ev.currentTarget.outerWidth pega o tamanho à medida que 
// a tela é redimensionada.
}
<p>Redimensiona a página.</p>
<div id="getWidthWindow">Tamanho da Página: </div>

Usa o evento onresize (https://www.w3schools.com/jsref/event_onresize.asp).

Ele é executado quando a página é redimensionada. Você poderá pegar o tamanho da página e fazer a lógica do seu programa.

document.getElementById("getWidthWindow").innerHTML = `Tamanho da página ${window.outerWidth}px.`;

window.onresize = function(ev){
let widthPage = ev.currentTarget.outerWidth;
//Sua implementação do código vai aqui dentro
document.getElementById("getWidthWindow").innerHTML =
`Tamanho da página ${widthPage}px.`;
//ev.currentTarget.outerWidth pega o tamanho à medida que 
// a tela é redimensionada.
}
<p>Redimensiona a página.</p>
<div id="getWidthWindow">Tamanho da Página: </div>

Usa o evento onresize (https://www.w3schools.com/jsref/event_onresize.asp).

Ele é executado quando a página é redimensionada. Você poderá pegar o tamanho da página e fazer a lógica do seu programa.

document.getElementById("getWidthWindow").innerHTML = `Tamanho da página ${window.outerWidth}px.`; 


window.onresize = function(ev) { 

let widthPage = ev.currentTarget.outerWidth; 

var x = window.matchMedia("(max-width: "+widthPage+"px)");

//Sua implementação do código vai aqui dentro
document.getElementById("getWidthWindow").innerHTML =`[${x.media}]`;
//ev.currentTarget.outerWidth pega o tamanho à medida que 

}
<p>Redimensiona a página.</p>
<div id="getWidthWindow">Tamanho da Página: </div>

Fonte Link
Taffarel Xavier
  • 1,4mil
  • 9
  • 17
Carregando