HTML Изменить размер шрифта в соответствии с разрешением экрана

-1

Я очень новичок в веб-разработке, и я пытаюсь отобразить некоторую информацию с помощью табличных тегов таким образом, чтобы содержимое этой таблицы всегда соответствовало высоте экрана.HTML Изменить размер шрифта в соответствии с разрешением экрана

страница будет иметь следующую структуру:

о - 1 большой стол

о -> Первая строка будет иметь 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>

Заранее спасибо,

источник

2016-03-28 Florian

Использование media queries для определения разные размеры шрифтов на разных экранах. В некоторых случаях отзывчивые размеры шрифта могут решить вашу проблему.

1vw = 1% видовом ширина

1vh = 1% от высоты окна просмотра

1vmin = 1vw или 1vh, в зависимости от того, меньше

1vmax = 1vw или 1vh, в зависимости от того, больше

источник

2016-03-28 00:42:46 Melih

Как я могу динамически использовать эти медиазапросы поэтому, в зависимости от количества строк у меня есть он подходит мой экран? после просмотра веб-страниц я не могу использовать встроенный css, который мешает мне со стороны сервера, чтобы дать определенный процент. Или мне что-то не хватает? – Florian

Вы можете использовать обертку в своем css (но есть и другие решения, которые вы можете использовать), например ..

CSS:

#wrapper 
{ 
    width: 100%; 
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
}

HTML/или любой другой файл:

<body> 
    <div id="wrapper"> <!-- main div for the body that wraps --> 
     <!-- put your codes and whatever inside the wrapper div --> 
    </div> 
</body>

источник

2016-03-28 02:16:51 rhavendc

HTML Изменить размер шрифта в соответствии с разрешением экрана

ответ

Смежные вопросы