Algo como consulta de mídia para Java Script?

Nov 04 2020

Recentemente eu estava perguntando sobre o redimensionamento do cabeçalho e alguém me deu um JavaScript que está funcionando muito bem, até o momento de redimensionar e usar a consulta de mídia, quando eu rolar para cima (com tamanho de tela menor e isso significa com tamanho de fonte padrão menor) javascript altere o tamanho da fonte de volta ao tamanho padrão.

Aqui está o meu código (não funciona por algum motivo aqui, mas no meu código funciona)

A pergunta é: como posso alterar esse script Java para torná-lo responsivo de alguma forma?

    var scrollCn = function(quantity)
{
  var scrollTop = (window.pageYOffset || document.scrollTop)  - (document.clientTop || 0);
  
  var size = 25 - ((scrollTop / quantity) || 0);
  if(size <= 15) size = 15;

/*   var size = 20 - ((scrollTop / quantity) || 0);
  if(size <= 10) size = 10; 
  
  Something i have tried-not working :D 
  */ 
  
  document.querySelector('.bignadpis p').setAttribute('style', 'font-size: '+size+'px;');

};
window.addEventListener('scroll', function(){ scrollCn(10) });
body {
    height: 3000px;
}

.bignadpis {
    max-width: 500px;
    z-index: 10001;
    font-family: 'Paytone One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 25px;
    text-transform: uppercase;
    position: fixed;
    float: left;
    padding-left: 5%;
}

@media screen and (max-width:1400px) {
    .bignadpis {
        max-width: 400px;
        font-size: 20px;
    }
}
<div class="bignadpis">
           <p>Účtovníctvo a zúčtovanie zdravotnej starostlivosti Svit</p>
        </div>

Respostas

s.kuznetsov Nov 04 2020 at 04:30

Eu modifiquei um pouco o seu código. Adicionada uma condição para a largura da janela do navegador. Funciona como uma consulta à mídia. Foi necessário?

if( window.innerWidth <= 1400 ){
      var size = 20 - ((scrollTop / quantity) || 0);
      if(size <= 10) size = 10; 
} 

var scrollCn = function(quantity)
{
  var scrollTop = (window.pageYOffset || document.scrollTop)  - (document.clientTop || 0);
  
   if( window.innerWidth > 1400 ){
      var size = 25 - ((scrollTop / quantity) || 0);
      if(size <= 15) size = 15;
    } 
  
   if( window.innerWidth <= 1400 ){
      var size = 20 - ((scrollTop / quantity) || 0);
      if(size <= 10) size = 10; 
    } 
  
  document.querySelector('.bignadpis p').setAttribute('style', 'font-size: '+size+'px;');

};
window.addEventListener('scroll', function(){ scrollCn(10) });
body {
    height: 3000px;
}

.bignadpis {
    max-width: 500px;
    z-index: 10001;
    font-family: 'Paytone One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 25px;
    text-transform: uppercase;
    position: fixed;
    float: left;
    padding-left: 5%;
}
}

@media screen and (max-width:1400px) {
    .bignadpis {
        max-width: 400px;
        font-size: 20px;
    }
}
<div class="bignadpis">
           <p>Účtovníctvo a zúčtovanie zdravotnej starostlivosti Svit</p>
        </div>