我有这张桌子。我需要将其样式设置为始终以16 x 9的比例设置，第一行占固定数量，而下一行占页面的其余部分。当屏幕不是16 x 9时，整个表格的单个字体大小和整个页面的中心
<body class="clock">
<table class="clocktable">
<tr>
<td id="clock" class="time">
00:00:00</td>
<td id="timer" class="timing">
00:00:00</td>
</tr>
<tr>
<td colspan="2" id="eventnotes" class="notesevent">
Here</td>
</tr>
</table>
</body>
该解决方案需要在桌面浏览器以及移动设备上都可以使用。我知道我可以使用Java脚本做到这一点，并根据页面宽度调整每个元素的大小，但是我觉得应该有更好的方法。
决定使用Javascript和jQuery。该表的样式设置为页面宽度和高度的100％。由于第一行已指定其高度，因此下一行将填满页面。
function resize()
{
var textheight = (($(window).width()) / 10);
clocktable.style.fontSize = (textheight) + 'px';
clock.style.height = (textheight*1.2) + 'px';
}
$(document).ready(function() {resize()});
$(window).resize(function() {resize()});
这是我的剧本。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句