Espero que este código seja útil para você assim como é para mim.
Se possível deixe seu cometário avaliando.
<script>
///IRÁ CHAMAR A FUNÇÃO PARA ORGANIZAR O LAYOUT DE ACORDO COM O REDIMENSIONAMENTO DA TELA //
window.addEventListener('resize', function(){
organizarLayout();
});
///////////////////////////////////
////// FUNÇÃO QUE RETORNARÁ A LARGURA E COMPRIMENTO DA TELA E DA RESOLUÇÃO/////
function tamanhoTela(){
var windowWidth = window.innerWidth; //retorna a largura da tela
var windowHeight = window.innerHeight; //retorna o comprimento da tela
var screenWidth = screen.width; //retorna a largura da resolução
var screenHeight = screen.height; //retorna o comprimento da resolução
var array = [windowWidth,windowHeight,screenWidth,screenHeight]//retorna a largura e comprimento da tela e resolução
return array;
};
///////////////////////////////////
/// DENTRO DESTA FUNÇÃO VOCÊ CRIA SUA REGRA DE ORGANIZAÇÃO DO LAYOUT DE ACORDO COM O TAMANHO DA TELA/////
function organizarLayout(){
var size = tamanhoTela(); //recebe o retorno em array da função tamanhoTela() com os valores de acordo com o tamanho da tela
if(size[0]<=720){ ///caso o tamanho da tela seja menor ou igual a 720px
setTimeout(function(){
//// insere aqui o código que mudará o layout para se adaptar ao tamanho da tela especificado no "if"
},100);
}else{
setTimeout(function(){
//// insere o código aqui que mudará o layout para se adaptar ao tamanho da tela diferente do especificado no primeiro "if"
},100);
}
}
organizarLayout();
/////////////////
</script>
0 comentários:
Postar um comentário