¿Algo así como una consulta de medios para Java Script?

Nov 04 2020

Recientemente estaba haciendo esta pregunta sobre el cambio de tamaño del encabezado y alguien me dio un JavaScript que funciona muy bien, hasta que se trata de cambiar el tamaño y usar la consulta de medios, cuando me desplazo hacia arriba (con un tamaño de pantalla más pequeño y eso significa con un tamaño de fuente predeterminado más pequeño) javascript cambie el tamaño de fuente de nuevo al tamaño predeterminado.

Aquí está mi código (no funciona por alguna razón aquí, pero en mi código sí)

La pregunta es: ¿cómo puedo cambiar este script Java para que de alguna manera responda?

    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>

Respuestas

s.kuznetsov Nov 04 2020 at 04:30

He modificado un poco tu código. Se agregó una condición para el ancho de la ventana del navegador. Funciona como una consulta de medios. ¿Fue necesario?

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>