使用父寬度、高度和字符長度動態更改字體大小

Question

我正在嘗試創建一個 HTML 網頁，它使用一些數據來顯示隨機報價。 但是有些引用非常小（例如 1 到 2 個短語），有些引用非常大（大約 2 段）。 而且我必須根據顯示尺寸和報價大小來顯示它們的大小。 在代碼中，我有一個帶有一些背景照片的 div，其中有一個 h2 用於主要引用。 我已經完成了所有其他代碼，但無法調整字體大小。 請幫助：（僅限純 JavaScript 請）主 HTML：-（div 作為帶有背景圖像的方形容器）

        <div id="outer" class="resize" onload="start()"> 
         <h2 class="question" id="mq"></h2>
    </div>  

Css

@font-face {
          font-family: font;
          src: url(font.otf);
      }     
      body {
          background-color: #00FFFF;
      }
      #outer{
          width: 80vw;
          height:80vw;
          background-size: cover;
          background-repeat: no-repeat;
          vertical-align: middle;
          max-width: 80vw;
          max-height: 80vw;
          min-height: 80vw;
          min-width: 80vw;
          overflow: hidden;
          display: flex;
          align-items: center;  
          justify-content: center;  
          text-align: center;  
          margin: auto;
      }
      
      *{
         font-family: font; 
      }
      h2 {
          color: #FFFFFF;
          mix-blend-mode: difference;
          backdrop-filter: blur(20px);
          border: 5% solid transparent;
          border-radius: 10%; 
          font-size: 4vw;
          overflow:hidden;
      }

Answer 1

在我看來，使用 JS 來配置響應式字體大小並不理想。 做到這一點的唯一方法是讓 JS 代碼不斷監控您在帖子中提到的寬度和高度。 如果您要在整個網站上執行此操作，則會對性能產生負面影響。

我建議使用 CSS 媒體查詢，以便根據視口的寬度設置字體大小。 您可以通過這種方式在整個網站上為移動設備、平板電腦和桌面設備標准化字體大小。