在div內動態調整文本大小並響應

我有兩個可以工作的JSFiddle，我想將它們組合在一起使用。在div內動態調整文本大小並響應

的jsfiddle-1：http://jsfiddle.net/MYSVL/3050/

window.onresize=function() { 
    var child = $('.artist'); 
    var parent = child.parent(); 

    child.css('font-size', '18px'); 

    while(child.height() > parent.height()) { 
     child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px"); 
    }

這裏藝術家容器內的文本響應及其延伸到最大字體大小時，屏幕更大。當屏幕尺寸較小時，它也縮小到最小的字體大小。

的jsfiddle-2：http://jsfiddle.net/MYSVL/3047/

function calcDivHeights() { 

    window.onresize=$(".artist").each(function() { 

     var child = $(this); 
     var parent = child.parent(); 

     //child.css('font-size', '18px'); 
     while (child.height() > parent.height()) { 
      child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px"); 
     } 

    }); 
}

這裏的功能是檢查每一個藝術家的div和調整字體大小根據而的條件，但我無法使其更加喜歡我的JSFiddle-1。一旦文字尺寸變小，即使我使屏幕更大，文字尺寸仍然較小。我希望我的JSFiddle-2完全按照JSFiddle-1的方式工作，以便我可以根據屏幕大小保持文本的響應能力。

有人可以幫我出來或隨意修改我的JSFiddle-2爲了實現目標。

在此先感謝

來源

2015-04-17 Saif Md Towfiq Islam

http://jsfiddle.net/MYSVL/3047/ ---鏈路對應修正小提琴2 –

我看不到你的兩個小提琴之間的差異，除了評論child.css('font-size', '18px')，都應該做同樣的事情。

您的第二個小提琴似乎無法正常工作，因爲一旦將窗口調整爲較小的分辨率，child變得小於或等於parent。然後，當你以更大的分辨率返回時，你再次調用while(child.height() > parent.height())，但現在你的孩子身高不會高於你的父母身高。

我想下面就只是做你問的：對於JS-

$(document).ready(function() { 
 

 
function adjustFontSize() { 
 
    var child = $('.artist'); 
 
    var parentHeight = child.parent().height(); 
 
    while(child.height() > parentHeight) { 
 
     child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px"); 
 
    } 
 
    while(child.height() < parentHeight) { 
 
     child.css('font-size', (parseInt(child.css('font-size')) + 1) + "px"); 
 
    } 
 
}; 
 

 
adjustFontSize(); // Call it when document is ready 
 
window.onresize = adjustFontSize; // Call it each time window resizes 
 

 
});

.artist-container { 
 
    width: 20%; 
 
    height: 40px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="artist-container"> 
 
    <div class="artist">Audhit Audhit Audhit Audhit Audhit Audhit Audhit</div> 
 
</div><br> 
 
<div class="artist-container"> 
 
    <div class="artist">Lorem</div> 
 
</div><br>

來源

2015-04-17 23:23:50 DrKey

嘿DrKey，感謝您的快速回復。我根據你的解決方案修改了我的代碼：http://jsfiddle.net/MYSVL/3051/，但仍然沒有運氣。當屏幕較大時，我希望字號變大。即使在大屏幕上，我也不希望它保持較小。你明白我的意思嗎？ –

不客氣:) – DrKey

我覺得CSS media queries方法是用於製作網頁響應，比使用JavaScript所有的時間來計算一切好多了。

例如，你可以考慮一下三種尺寸：

電話（可以說，400像素寬）
平板（可以說，800像素寬）
電腦（可以說，> 800像素寬度）實現這一目標，使用桌面第一種方法的

的一種方式，應該是：

/* DESKTOP */ 
body { 
    font-size: 1em; 
    ... 
} 
... 
/* General rules for desktop 
... 

/* TABLET */ 
@media screen and (max-width:800px and min-width:400px) { 
    /* Overwrite the rules you want to change */ 
    body { 
     font-size: .75em; 
    } 
    ... 
} 

/* PHONE */ 
@media screen and (max-width:400px) { 
    /* Overwrite the rules you want to change */ 
    body { 
     font-size: .75em; 
    } 
    #div1 { 
     height: 20%; 
    } 
    ... 
}

除此之外，別忘了使用相對單位（em，vw，vh，rem ...）和百分比。

Here你有一個關於響應式設計的非常好的鏈接。

來源

2015-04-17 23:17:12

在div內動態調整文本大小並響應

回答

相關問題