字體大小相對於容器

我正在設計一個網站，調整自己的窗口大小，我需要使文本的大小相對於它的容器（一個div）。我搜索了用css做這件事，發現這是不可能的。所以我想用JavaScript，但我不是一個JavaScript程序員。於是我去搜索每一塊，我需要的代碼，並將其編譯成這樣：字體大小相對於容器

<script type="text/javascript"> 
    $(document).ready(function() { 
     while(true) { 
      document.getElementById("text").style.fontSize = $("container").height(); 
     } 
    }); 
</script>

（以下簡稱「而」是重新大小它不斷，考慮到用戶可能會重新調整窗口大小）

我把腳本放在「head」標籤中，它不起作用。我不知道腳本是否錯誤，或者它沒有運行。我究竟做錯了什麼？另外我想延遲腳本的結尾，以避免它瘋狂運行，但我不知道該怎麼做。

由於提前，

盧卡

感謝的答案，但沒有工作。我猜腳本沒有運行，有什麼可能是錯誤的？請幫忙！

來源

2013-03-22 Luca Rood

'而（真）'是一個無限循環，你至少應該使用'setInterval'。但是，我不明白爲什麼你應該這樣調整它。你試過['$（window）.resize（）']（http://api.jquery.com/resize/）嗎？ – Antony

當文檔完成加載時，您可能只想讓字體大小調整代碼在窗口大小調整事件上運行，而不是運行'while（true）'循環（因爲您使用的是jQuery，所以可以使用['.resize （）']（http://api.jquery.com/resize/）事件綁定器）。 – ajp15243

'em'與容器大小有關。你在說什麼？用'em'代替字體大小而不是像素。 – Sanchit

你應該嘗試這樣的事情，而不是（如果我理解正確的話，你想要做什麼）：

$(".container").each(function(){ //if container is a class 
    $('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class 
});

或更多的東西像這樣

$(window).resize(function(){ 
    $('.text').css({'font-size': $('#container').height()+"px"}); 
});

來源

2013-03-22 16:11:04

得到它的工作！謝謝！ –

如果您的意思是您正在製作響應式網站，則可以根據窗口大小調整處理程序內部的document.documentElement.clientWidth更改字體大小。

此外，你可以使用em單位，而不是可擴展和移動友好的像素。

CSS3也有一個新的有趣的「根EM」單元：

CSS3引入了一些新的單位，包括REM單元，這對於「根EM」代表。如果這還沒有讓你睡覺，那麼讓我們看看 rem是如何工作的。

em單位是相對於父級的字體大小，這會導致配合問題。 rem單位是相對於根元素或html元素的。這意味着我們可以在html元素上定義單個字體大小，並將所有rem單位定義爲其中的百分比。

http://snook.ca/archives/html_and_css/font-size-with-rem

來源

2013-03-22 16:10:06

嘗試這個：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(window).resize(function() { 
      document.getElementById("text").style.fontSize = $(".container").height(); 
      // let container is a class 
     }); 
    }); 
</script>

來源

2013-03-22 16:12:02

您可以使用。調整（）事件處理這隻會火的時候，調整窗口大小

var constant = [Some magic number]  

$(window).resize(function() { 
    var fontSize = $(this).height()*$(this).width()*constant; 
    $(html).css("font-size",fontSize) 
}

使用恆定的基礎上，新的寬度/高度計算字體大小

來源

2013-03-22 16:12:13 DaveB

http://jsfiddle.net/AyRMC/

您可以使用視臺：

.vw{ 
    font-size:3vw; 
    color:red; 
} 
.vh{ 
    font-size:3vh; 
    color:green; 
} 
.vmin{ 
    font-size:3vmin; 
    color:blue; 
}

不具有充分支持相當，但，但IE10，Chrome瀏覽器， Firefox和Safari都支持它。

一個缺點（或可能的上行）是，至少在chrome中，文本不會隨着視口大小調整而縮放。

兼容性：http://caniuse.com/viewport-units

來源

2013-03-22 16:17:01 Shmiddty

字體大小相對於容器

回答

相關問題