[英]I want to resize the font-size, while resizing the the table elements
在增加表格的高度和寬度時，字體大小也應增加，反之亦然。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes
/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
}
#resizable h3 {
text-align: center;
margin: 0;
}
</style>
<script>
$(function() {
$("#resizable").resizable();
});
</script>
</head>
<body>
<div class="ui-widget-content">
<table id="resizable">
<tr>
<th>I want to resize this font-size, directly proportionally while resizing this table</th>
</tr>
</table>
</div>
</body>
</html>
然后，您可以在視口單位中使用字體大小，例如：
p{
font-size: 1vw;
}
尋找不同的視口單位：
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
也許您喜歡這種方法
http://jsfiddle.net/nguk1tfu/11/
$(function() {
$( "#resizable" ).resizable();
old_width = $( "#resizable" ).width();
old_height = $( "#resizable" ).height();
$( "#resizable" ).resize(function(){
current_widht = $( "#resizable" ).width();
current_height = $( "#resizable" ).height();
// this shoud the de index for font decrease or increase
r = (current_widht/old_width) * (current_height/old_height);
if( r >= 1)
{
r = r*2; // you can change this
$( "#resizable" ).css('font-size', 11 + r);
}
else
{
r = r*2;
$( "#resizable" ).css('font-size', 11 - r);
}
});
});
如何使用 em 和字體大小百分比准確調整嵌套元素的大小？
[英]How to accurately resize nested elements with ems and font-size percentage?
如何自動調整文本區域內的字體大小以不溢出？
[英]How do I automatically resize the font-size inside a textarea to not overflow?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.