जावा स्क्रिप्ट के लिए मीडिया क्वेरी जैसा कुछ?

Nov 04 2020

हाल ही में मैं हेडर को फिर से आकार देने के बारे में यह सवाल पूछ रहा था और किसी ने मुझे एक जावास्क्रिप्ट दिया, जो बढ़िया काम कर रहा है, जब तक कि यह आकार बदलने और मीडिया क्वेरी का उपयोग करने के लिए नहीं आता है, जब मैं स्क्रॉल करता हूं (छोटे स्क्रीन आकार के साथ और इसका मतलब छोटे डिफ़ॉल्ट फ़ॉन्ट-आकार के साथ) जावास्क्रिप्ट फ़ॉन्ट आकार को डिफ़ॉल्ट आकार में बदलें।

यहाँ मेरा कोड है (यहाँ किसी कारण से काम नहीं करता है लेकिन मेरे कोड में यह काम करता है)

प्रश्न यह है: मैं कैसे इस जावा स्क्रिप्ट को किसी भी तरह से उसे उत्तरदायी बना सकता हूं?

    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>

जवाब

s.kuznetsov Nov 04 2020 at 04:30

मैंने आपका कोड थोड़ा संशोधित किया है। ब्राउज़र विंडो की चौड़ाई के लिए एक शर्त जोड़ी गई। यह एक मीडिया क्वेरी की तरह काम करता है। क्या यह आवश्यक था?

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>