web-dev-qa-db-fra.com

redimensionner la taille de police en fonction de la taille div

J'ai fait ça jsfiddle

le html:

<div id="launchmain" >
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
    <div id ="maininvite">
        <h2> header</h2>
        <p>not a lot of text here but still overflowing</p>
    </div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
<div id="box9"></div>
</div>

avec css:

html, body {
 height: 100%;
 width: 100%;    
}
#launchmain {
 width: 55%;
 display: inline-block;
 position: relative;
    top:10%;
    left:25%;
}
#launchmain:after {
    padding-top: 79.26%; 
    display: block;
    content: '';
    margin-top: 10px;
}
#box1
{
    border: 1px solid #000000;

    position: absolute;
    width:25.37%; 
    height:21.88%            
}
#box2
{
    border: 1px solid #000000;
    width: 48.48%;
    height:21.88%;
    position: absolute;
    left:25.64%
}
#box3
{
    border: 1px solid #000000;
    width:25.37%; 
    height:21.88%;
    position: absolute;
    left:74.39%;
}
#box4
{
    border: 1px solid #000000;
    width:33.235%; 
    height:53.84%;
    position: absolute;
    top:22.07%;
}
#maininvite
{
    border: 1px solid #000000;
    width:33.53%; 
    height:53.84%;
    position: absolute;
    top:22.07%;
    left: 33.235%;
}
#box6
{
    border: 1px solid #000000;
    width:33.235%; 
    height:53.84%;
    position: absolute;
    top:22.07%;
    left: 66.765%;
}
#box7
{
    border: 1px solid #000000;
   width:25.37%; 
    height:21.88% ;
    position: absolute;
    top:76.2%;

}
#box8
{
    border: 1px solid #000000;
  width: 48.48%;
    height:21.88%;
    position: absolute;
   left:25.64%;
    top:76.2%;
}
#box9
{
    border: 1px solid #000000;
    width:25.37%; 
    height:21.88% ;
    position: absolute;
    top:76.2%;
    left:74.39%;
}
#maininvite h2{

    font-size: 180%;
}

p{
    position: relative;
    font-size: 80%;
}
​

Il est composé de 9 cases, avec le milieu dessus a du texte dedans. Je l'ai fait pour que les cases pour qu'elles soient redimensionnées avec l'écran soient redimensionnées pour qu'il reste au même endroit tout le temps.

Le texte, cependant, ne redimensionne pas - même lorsque j'utilise un pourcentage.

  1. Comment puis-je redimensionner le texte pour qu'il soit toujours le même rapport sur toute la page?
  2. Est-ce une bonne solution pour gérer plusieurs résolutions? ou dois-je avoir de nombreux contrôles @media dans le css et avoir de nombreuses dispositions pour chaque type de média?
cssresponsive-design
19
Nick Ginanto

En ce qui concerne votre code, consultez @Coulton. Vous devrez utiliser JavaScript.

Commander soit FitText (cela fonctionne dans IE, ils ont juste quelque peu ballotté leur site) ou BigText .

FitText vous permettra de mettre à l'échelle du texte par rapport au conteneur dans lequel il se trouve, tandis que BigText concerne davantage le redimensionnement de différentes sections de texte pour qu'elles aient la même largeur dans le conteneur.

BigText définira votre chaîne à exactement la largeur du conteneur, tandis que FitText est moins parfait en pixels. Il commence par définir la taille de la police à 1/10 de la largeur de l'élément conteneur. Il ne fonctionne pas très bien avec toutes les polices par défaut, mais il a un paramètre qui vous permet de diminuer ou d'augmenter la "puissance" de la redimensionnement. Il vous permet également de définir une taille de police min et max. Il faudra un peu de tripotage pour commencer à travailler la première fois, mais cela fonctionne très bien.

http://marabeas.io <- jouer avec lui actuellement ici. Pour autant que je sache, BigText ne fonctionnerait pas du tout dans mon contexte.

Pour ceux d'entre vous qui utilisent Angularjs, voici un version angulaire de FitText que j'ai fait.

Voici un mix moins que vous pouvez utiliser pour rendre la solution de @ humanANDpeace un peu plus jolie:

@mqIterations: 19;
.fontResize(@i) when (@i > 0) {
    @media all and (min-width: 100px * @i) { body { font-size:0.2em * @i; } }
    .fontResize((@i - 1));
}
.fontResize(@mqIterations);

Et une version SCSS grâce à @NIXin!

$mqIterations: 19;
@mixin fontResize($iterations) { 
    $i: 1; 
    @while $i <= $iterations { 
        @media all and (min-width: 100px * $i) { body { font-size:0.2em * $i; } } 
        $i: $i + 1; 
    }
} 
@include fontResize($mqIterations);
25
Patrick

Ma réponse ne nécessite pas Javascript et repose uniquement sur CSS3 (disponible dans la plupart des navigateurs modernes). Personnellement, je l'aime beaucoup si le design ne repose pas trop sur Javascript.

Ma réponse est une "pure CSS3, aucun Javascript requis" - solution:

La solution comme on peut le voir ici ( http://jsfiddle.net/uNF3Z/16/ ) utilise les ajouts suivants aux styles CSS (qui utilisent le @media requête de CSS3 qui)

@media all and (min-width: 50px)   {  body  { font-size:0.1em;  } }
@media all and (min-width: 100px)  {  body  { font-size:0.2em;  } }
@media all and (min-width: 200px)  {  body  { font-size:0.4em;  } }
@media all and (min-width: 300px)  {  body  { font-size:0.6em;  } }
@media all and (min-width: 400px)  {  body  { font-size:0.8em;  } }
@media all and (min-width: 500px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 600px)  {  body  { font-size:1.2em;  } }
@media all and (min-width: 700px)  {  body  { font-size:1.4em;  } }
@media all and (min-width: 800px)  {  body  { font-size:1.6em;  } }
@media all and (min-width: 900px)  {  body  { font-size:1.8em;  } }
@media all and (min-width: 1000px) {  body  { font-size:2.0em;  } }
@media all and (min-width: 1100px) {  body  { font-size:2.2em;  } }
@media all and (min-width: 1200px) {  body  { font-size:2.4em;  } }
@media all and (min-width: 1300px) {  body  { font-size:2.6em;  } }
@media all and (min-width: 1400px) {  body  { font-size:2.8em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.0em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.2em;  } }
@media all and (min-width: 1600px) {  body  { font-size:3.4em;  } }
@media all and (min-width: 1700px) {  body  { font-size:3.6em;  } }

Cela entraîne en fait que la taille de la police est ajustée à la largeur d'écran disponible. Cet ajustement se fait par étapes de 100 pixels (ce qui est suffisamment fin pour la plupart des utilisations) et couvre une largeur d'écran maximale de 1700 pixels, ce que je considère être amplement (2013) et peut, en ajoutant d'autres lignes, être encore amélioré.

Un avantage secondaire est que l'ajustement de la taille de la police se produit à chaque redimensionnement. Cet ajustement dynamique (parce que, par exemple, les fenêtres du navigateur sont redimensionnées) n'est peut-être pas encore couvert par la solution basée sur Javascript.

65
humanityANDpeace

Je cherchais la même fonctionnalité et j'ai trouvé cette réponse. Cependant, je voulais vous donner une mise à jour rapide. C'est l'unité vmin de CSS3.

p, li
{
  font-size: 1.2vmin;
}

vmin signifie "la valeur la plus petite entre 1% de la hauteur du ViewPort et 1% de la largeur du ViewPort".

Plus d'informations sur SitePoint

20
amenadiel

La réponse que je présente est très simple, au lieu d'utiliser "px", "em" ou "%", j'utiliserai "vw". En bref, cela pourrait ressembler à ceci: - h1 {font-size: 5.9vw;} lorsqu'il est utilisé à des fins de titre.

Voir ceci: Démo

Pour plus de détails: Tutoriel principal

8
Abhishek Sen

Voici une version SCSS du mixin de @ Patrick.

$mqIterations: 19;
@mixin fontResize($iterations)
{
  $i: 1;
  @while $i <= $iterations
  {
    @media all and (min-width: 100px * $i) {
      body { font-size:0.2em * $i; }
    }
    $i: $i + 1;
  }
}
@include fontResize($mqIterations);
5
niieani