调整div大小时调整字体大小
[英]Resizing font size when resizing a div
问题描述
I'm developing a web application which allow you to add dynamics div s which are resizable and draggable by jQuery into a div container with a black background. 
我正在开发一个Web应用程序，它允许您将jQuery可调整大小和可拖动的动态div添加到具有黑色背景的div容器中。
Here is the code of this app: 这是此应用程序的代码：
.centrer { display: block; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height : 768px; width : 432px; background-color : #000000; } .menu { border:1px solid black; padding-left:15px; padding-right:15px; padding-top:2px; padding-bottom:2px; float:left; text-align : center; } h3, li, ul{ text-align : left; } .encadrer { border: 1px solid white; height : 120px; position:absolute !important; } .centrerTitre{ position: absolute; top: 0; left: 0; right: 0; color : white; margin : auto; text-align : center; padding-top : 7px; } .centrerPara{ font-size: 16; color : white; margin : auto; text-align : center; padding-left : 7px; padding-right : 7px; } .inner { display: inline-block; vertical-align: middle; text-align:center; width:100%; } .encadrer:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; } /*----- Resizable ------*/ .ui-resizable { position: relative;} .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;} .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; } .ui-resizable-nw { cursor: nw-resize; height: 7px; width: 7px; top: -5px; left: -5px; } .ui-resizable-se { cursor: se-resize; height: 7px; width: 7px; right: -5px; bottom: -5px; } .ui-resizable-ne { cursor: ne-resize; height: 7px; width: 7px; top: -5px; right: -5px; } .ui-resizable-sw { cursor: sw-resize; height: 7px; width: 7px; left: -5px; bottom: -5px; } /*----------------------*/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Affichage</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" /> <body> <div id="menu" class="menu"> <h3>Taille de l'écran</h3> <select id='selector'> <option value="1920x1080">1920x1080</option> </select> </br></br> <table> <tr> <td><input type="radio" id="portrait" name="orientation" value="portrait" checked="checked">Portrait</td> <td><input type="radio" id="paysage" name="orientation" value="paysage">Paysage</td> </tr> </table> </br> <h3>Ajouter des éléments</h3> <ul> <li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li> </ul> </div> <div id="bg"></div> <script type="text/javascript"> var bg = document.getElementById('bg'); bg.className = "centrer"; var ajoutImg = document.getElementById('ajoutImage'); var initDiagonal; var initFontSize; var rad = document.getElementsByName('orientation'); for(var i = 0; i < rad.length; i++) { rad[i].onclick = tailleEcran; } document.getElementById("selector").addEventListener("change", tailleEcran, false); ajoutImg.onclick = function() { //var name = prompt("Texte de l'image :"); var container = document.createElement("div"); container.className = 'encadrer'; var inner = document.createElement("div"); inner.className = 'inner'; var titre = document.createElement("p"); var para = document.createElement("p"); titre.textContent = "Titre"; titre.className = 'centrerTitre'; inner.appendChild(titre); para.textContent = prompt("Texte de l'image :");; para.className = 'centrerPara'; inner.appendChild(para); container.appendChild(inner); //var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>'); bg.appendChild(container); $(container) .draggable({containment:"parent"}) .resizable({ containment:"parent", handles: "all" }); }; function tailleEcran() { switch(document.getElementById("selector").value){ case '1920x1080' : if(document.getElementById("portrait").checked == true){ bg.style.height = '768px'; bg.style.width = '432px'; }else{ bg.style.height = '432px'; bg.style.width = '768px'; } break; } } </script> </body> </html>
I'm trying to make the font size of the content of the dynamic div resizing when you resize the div , as you can see at this post: 我试图使动态内容的字体大小div调整大小当调整div ，你可以在这个帖子看到：
Can text be resizable using jquery-ui? 可以使用jquery-ui调整文本大小吗？
I put all the nodes into variables, but I failed to add this function to my app. 我将所有节点放入变量中，但是未能将此函数添加到我的应用程序中。
Someone know how I can do that? 有人知道我该怎么做吗？
Thanks for your attention, 感谢您的关注，
Regards, 问候，
Maxime OZENNE. 马克西姆·奥森（Maxime OZENNE）。
1 个解决方案
解决方案1
0 已采纳 2015-12-21 09:15:24
Ok I finally discovered a jquery script which can do it easily, without needs to modify the code. 好的，我终于发现了一个无需修改代码即可轻松实现的jquery脚本。
The jquery script is FitText ( http://fittextjs.com/ ). jQuery脚本是FitText（ http://fittextjs.com/ ）。
Thanks to Igor Ivancha, I found this script at the bottom of the css solution your purposed :p 感谢Igor Ivancha，我在您打算的：p的CSS解决方案的底部找到了该脚本：
You just need to add : 您只需要添加：
$(titre)
.fitText(1.5);
$(para)
.fitText(0.4);
into the <script> tag then it will work properly. 放入<script>标记，即可正常运行。 Thanks all ! 谢谢大家！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.