ajuster le font-size automatiquement dans une zone responsive

ajuster le font-size automatiquement dans une zone responsive - Javascript/Node.js - Programmation

Marsh Posté le 23-04-2016 à 08:50:19    

bonjour ,  
 
j'ai besoin d'ajuster la fonte de texte automatiquement sur une zone fixe en responsive dont la hauteur doit rester fixe , avec du texte dont la longueur (nombre de caractère) va être variable  
 
jusqu'à present je l'ai fait à la mode 'bourrin' mais je souhaiterais savoir si il n'existe pas une programmation plus sympa  
 
j'ai du javascript dans une page html5
mon code :  

Code :
  1. 'span.header_title@style': function (arg) {
  2.        var temp_style = "font-size: 2.5vw;"
  4.        if (arg.context.result.title.length > 30) {temp_style = "font-size: 2.2vw;";}
  5.        if (arg.context.result.title.length > 35) {temp_style = "font-size: 2.1vw;";}
  6.        if (arg.context.result.title.length > 41) {temp_style = "font-size: 1.9vw;";}
  7.        if (arg.context.result.title.length > 44) {temp_style =  "font-size: 1.7vw;";}
  8.        if (arg.context.result.title.length > 51) {temp_style = "font-size: 1.5vw;";}
  9.        if (arg.context.result.title.length > 57) {temp_style = "font-size: 1.3vw;";}
  11.        return temp_style;
  12.       },
  15. ......
  17. <div class="header_detail">
  18.   <table>
  19.    <tr>
  20.     <td id="header_td">
  21.     <a href="javascript:ouvre_prefered_page()" id="li_home_left" data-tip-detail_home="prefered page" style="height: 43px; width: 8%; left: -4%;" ></a>
  22.      <span class="header_title" ></span>
  23.      <img src="pictures/icon/year.png" style="position:relative; top: -0.1vw; width: 2.2vw; vertical-align: baseline;"  alt="year"/>
  24.      <span class="header_year" ></span>
  25.      <span class="header_id" ></span>
  26.      <img src="pictures/icon/duration.png" style="position:relative; top: -0.1vw; left: -10px; width: 2.2vw" alt="duration"/>
  27.      <span class="header_runtime" ></span>
  28.      <span class="header_text"> </span>
  29.      <a href="#"><img title="watched" class="watched" style="width: 2.1vw;" src="./pictures/watched.png" onclick="" alt="watched"/></a>
  30.      <span class="country" title="country" ></span>
  31.      <img class="channels" src="./pictures/icon/empty.png" alt="no audio channels"></img>
  32.     </td>
  33.    </tr>
  34.   </table>
  35.  </div>


 
merci de vos conseils

Reply

Marsh Posté le 23-04-2016 à 08:50:19   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed