-1
我在网络开发中很新颖，我试图用表格标签显示一些信息，使表格内容总是适合屏幕高度。HTML调整字体大小以适合屏幕分辨率
该网页将具有以下结构：
-O - 1大表
-O - >的第一行将具有1点的行（这是2行的表）
ö - >第二行将分成3部分，3个不同的表格代表不同的信息。
+------------------------------------------+
| First row of table |
+-------+-----------------------+----------|
| Inner | Inner table |Inner |
| table | 2 |table 3 |
| 1 | | |
+------------------------------------------+
而且我现在面临的问题是管理来自动调整文本的字体显示，直到没有滚动条自动降低 - 某种类型自动取消变焦。
经过一些Google搜索之后，我明白我应该深入研究JQuery以获得某种程度上的屏幕大小，并自动调整所有对象的所有字体以最终匹配这个大小。但是，因为我在这个技术我有点失去了...很新
这里是HTML我与虚拟文本使用：预先
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" rel="stylesheet"/>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><script crossorigin="anonymous" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" class="table table-condensed nopadding table-striped">
<thead>
<tr>
<th class="col-md-2 nopadding text-center">First Name</th>
<th class="col-md-2 nopadding text-center">Last name</th>
<th class="col-md-2 nopadding text-center">Office id</th>
<th class="col-md-2 nopadding text-center">Other info</th>
<th class="col-md-2 nopadding text-center">Other info</th>
<th class="col-md-2 nopadding text-center">Other info</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p align="center"><b>My Name</b></p>
</td>
<td>
<p align="center"><b>Last name</b></p>
</td>
<td>
<p align="center"><b>Office id </b></p>
</td>
<td>
<p align="center"><b>Bla bla bla </b></p>
</td>
<td>
<p align="center"><b>Bla bla bla</b></p>
</td>
<td>
<p align="center"><b>Bla bla bla</b></p>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="table table-condensed nopadding ">
<thead>
<tr>
<th class="col-md-1 nopadding" style="width:15%"></th>
<th class="col-md-10 nopadding" style="width:70%"></th>
<th class="col-md-1 nopadding" style="width:15%"></th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 15%">
<table border="1" class="table table-striped table-hover table-condensed">
<tbody>
<tr>
<th>Incoming events</th>
</tr>
<tr>
<td>Meeting 1</td>
</tr>
<tr>
<td>Meeting 2 </td>
</tr>
<tr>
<td>Meeting 3</td>
</tr>
<tr>
<td>Meeting 4</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 70%">
<table border="1" class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th style="vertical-align:top ; color:orange">Must do</th>
<th style="vertical-align:top; color:green">Should do</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td> Review Internal presentation </td>
</tr>
<tr>
<td></td>
<td> Review external presentation </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15%">
<table border="1" class="table table-striped table-hover table-condensed" style=" table-layout: fixed; word-wrap: break-word;">
<tbody>
<tr>
<th>Achieved</th>
</tr>
<tr>
<td> Achieved bla bla </td>
</tr>
<tr>
<td> Achieved bla bla </td>
</tr>
<tr>
<td> Achieved bla bla </td>
</tr>
<tr>
<td align="center">. . .</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<meta content="60;URL=/" http-equiv="refresh"/>
<p align="center"><b>Some useless text</b><br/></p>
</body>
</html>
感谢，
如何动态使用这种媒体的查询，以便根据我有适合我的屏幕上的行数？在浏览网页后，我无法使用内联css，这会阻止我从后端提供某些特定的百分比。或者我错过了什么？ – Florian