2016-03-28 26 views
-1

Web geliştirmede çok yeniyim ve tablo etiketlerini kullanarak o tablonun içeriğinin her zaman bir ekran yüksekliğine sığacağı şekilde bazı bilgiler göstermeye çalışıyorum.HTML Ekran çözünürlüğüne uyacak şekilde yazı tipinizi yeniden boyutlandırma

sayfa aşağıdaki yapıya sahip olacaktır:

o - 1 büyük bir masa

O -> ilk satır

(2 sıra bir tablo olan) 1 satır olurdu O -> İkinci sıra 3 bölüme ayrılacak, farklı bilgileri temsil eden 3 farklı tablo. Otomatik un-zoom çeşit -

+------------------------------------------+ 
|  First row of table     | 
+-------+-----------------------+----------| 
| Inner |  Inner table  |Inner  | 
| table |   2    |table 3 | 
| 1 |      |   | 
+------------------------------------------+ 

Ve Karşılıklı sorunun otomatik olarak metnin yazı tipini ayarlamak için yönetmektir hiçbir kaydırma çubuğu kalmayıncaya kadar otomatik azaltmak için görüntülenen.

Bazı kullanıcılardan sonra, bir şekilde ekran boyutuna ulaşmak ve tüm boyuttaki nesnemin tüm yazı tipini otomatik olarak yeniden boyutlandırmak için JQuery'ye girmem gerektiğini anladım. tanımlamak için önceden

<!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> 

teşekkür,

cevap

0

Kullanım media queries: Ben tür kayıp am bu teknolojiye ... çok yeniyim Fakat

İşte

Ben model metinli kullanıyorum html Farklı ekranlarda farklı yazı tipi boyutları. Bazı durumlarda, yanıt veren yazı tipi boyutları sorununuzu çözebilir. görünüm alanının

1vw =% 1 görünüm yüksekliğinin

1vh =% 1 genişlik

1vmin = 1vw veya 1vh, hangisi daha küçüktür

1vmax = 1vw veya 1vh, hangisi büyük

+0

nasıl dinamik olarak satır sayısı bu benim ekrana uyuyor var bağlı bu medya sorgularını kullanabilir? internette gezindikten sonra, belirli bir yüzdeyi vermek için arka uçtan beni engelleyen inline css'yi kullanamıyorum. Yoksa bir şey mi özledim? – Florian

0

örneğin, sen css bir şal kullanabilirsiniz (ama çok kullanabileceğiniz diğer çözümler vardır) ..

css:

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

html/veya ne olursa olsun dosya:

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