บางอย่างเช่นแบบสอบถามสื่อสำหรับ Java Script?

Question

เมื่อเร็ว ๆ นี้ฉันถามคำถามนี้เกี่ยวกับการปรับขนาดส่วนหัวและมีคนให้ JavaScript ซึ่งใช้งานได้ดีจนกระทั่งมาถึงการปรับขนาดและใช้แบบสอบถามสื่อเมื่อฉันเลื่อนขึ้น (ด้วยขนาดหน้าจอที่เล็กลงและนั่นหมายความว่ามีขนาดตัวอักษรเริ่มต้นที่เล็กกว่า) javascript เปลี่ยนขนาดตัวอักษรกลับเป็นขนาดเริ่มต้น

นี่คือรหัสของฉัน (ใช้ไม่ได้ด้วยเหตุผลบางประการที่นี่ แต่ในรหัสของฉันมันทำ)

คำถามคือฉันจะเปลี่ยนสคริปต์ Java นี้ให้เขาตอบสนองได้อย่างไร

    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>

Answer 1

ฉันได้แก้ไขโค้ดของคุณเล็กน้อย เพิ่มเงื่อนไขสำหรับความกว้างของหน้าต่างเบราว์เซอร์ ทำงานเหมือนแบบสอบถามสื่อ จำเป็นไหม?

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>