字體大小可以是css/css3中容器大小的％嗎？

我有一個容器：字體大小可以是css/css3中容器大小的％嗎？

<div id="container"><h1>LONG TITLE LINE</h1></div>

和css：

#container { 
    width: 50%; 
    height: 50%; 
} 

#container h1 { 
    font-size: XXXXXX; 
}

「XXXXXX」 < - 我想要的是基於頁面/容器的寬度字體大小。

問題：是否可以根據頁面的寬度獲得h1的字體大小？在css3中？我相信它可以使用JS來完成，但是如果可能的話就避免這樣做。

來源

2012-01-26 circusdei

我不認爲這是在CSS可能，但這種可能是有趣的你：

http://fittextjs.com/

來源

2012-01-26 16:30:38

哦 - 這很漂亮。檢查它對性能的影響。 – circusdei

對我來說很好 - 感謝您的鏈接！現在放到背景圖片上：/ – circusdei

不像你說的那樣。但是，你可以做相反的事情。如果您在ems中聲明基本字體大小，請使頁面寬度取決於字體大小，然後使用em值作爲佈局。然後，如果增加文本的大小，寬度會增加。

來源

2012-01-26 16:21:15

時間，然後你可以設置基於所呈現的頁面大小視。 – circusdei

我不明白爲什麼這不能用媒體的標籤來完成。根據你想如何精細，使之，你可以做這樣的事情：

@media only screen and (min-width: 1000px){ 
    #container h1 { font-size:42px; } 
} 
@media only screen and (max-width: 1000px){ 
    #container h1 { font-size:40px; } 
} 
@media only screen and (max-width: 900px){ 
    #container h1 { font-size:35px; } 
} 
@media only screen and (max-width: 800px){ 
    #container h1 { font-size:30px; } 
} 
@media only screen and (max-width: 700px){ 
    #container h1 { font-size:25px; } 
} 
@media only screen and (max-width: 600px){ 
    #container h1 { font-size:20px; } 
} 
@media only screen and (max-width: 500px){ 
    #container h1 { font-size:15px; } 
}

見的jsfiddle here的演示。

來源

2014-03-10 14:34:20 adamdport

上佈局的其他選項dependng是使用vw單位：

VW：1 /第100次視口的寬度的（source MDN）

如果#container寬度設定作爲視口的百分比，字體大小將適應其寬度：

DEMO

CSS：

#container h1 { 
    font-size: 5vw; 
}

爲vw單位支持的瀏覽器IE9是+，看到canIuse獲取更多信息。

來源

2014-07-19 09:02:33

這應該是被接受的答案，它確實是OP所要求的插件。 – adamdport

正是我需要的，沒有任何插件！ – Sushant

這不是OP要求的。視口單位與視口（因此它們的名稱）成比例。 OP（最可能是很多其他人）正在尋找的是基於容器的縮放。兩個完全不同的東西 –

我的解決方案創建了一個CSS變量來表示容器相對於視口的高度，以「vh」爲單位，然後可以使用該變量與CSS3「calc」函數一起計算字體高度，容器的高度。

容器的尺寸進行測量每個視口（窗口）被調整

<html> 
     <head> 
      <style> 
       .container { 
        width:100%; 
        /* 
         any rules you like to set the dimensions of the container 
        */ 
        top:40px; 
        height:30vh; 

        border:1px solid red; 
        white-space:nowrap; 
       } 
      </style> 
      <script> 
        function setCSSVariableAccordingToElementHeightRelativeToViewPort(elementClassName, cssVariableName, immutableElement) 
        { 
         var element 
         /* 
          the "immutableElement" parameter is 
           true when the container is never recreated, 
           false if its generated dynamicaly 
         */ 
         if(immutableElement === true) { 
          element = document.querySelector("." + elementClassName) 
         }     

         var onResize = function() { 
          if(immutableElement !== true) { 
           element = document.querySelector("." + elementClassName) 
          } 

          if(element != undefined) { 
           var elementHeight = element.offsetHeight 
           var elementVH = (elementHeight/window.innerHeight) * 100 
           element.style.setProperty(cssVariableName, elementVH + "vh") 
          } 
         } 
         onResize() 
         window.onresize = onResize 
        } 
      </script> 
     </head> 
     <body> 
      <div class="container"> 
       <span style="font-size:calc(var(--container-vh) * 0.25)">25%</span> 
       <span style="font-size:calc(var(--container-vh) * 0.50)">50%</span> 
       <span style="font-size:calc(var(--container-vh) * 1.00)">100%</span> 
      </div> 
     </body> 

     <script> 
      setCSSVariableAccordingToElementHeightRelativeToViewPort("container", "--container-vh", true) 
     </script> 
    </html>

JSFiddle

來源

2017-04-19 23:33:58

字體大小可以是css/css3中容器大小的％嗎？

回答

相關問題