Изменять размер шрифта в соответствии с размером div

Я сделал это jsfiddle

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>

с помощью 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%;
}
​

Он состоит из 9 ящиков, причем средний текст имеет текст. Я сделал так, чтобы ящики, чтобы они изменили размер с изменением размера экрана, чтобы он оставался в одном и том же месте все время.

Текст, однако, не изменяется, даже когда я использую процент.

  • Как изменить размер текста, чтобы он всегда был одним и тем же соотношением со всей страницы?
  • Является ли это подходящим решением для обработки нескольких разрешений? или мне нужно иметь много проверок @media в css и иметь много макетов для каждого типа медиа?

Ответы

Ответ 1

Что касается вашего кода, см. @Coulton. Вам нужно будет использовать JavaScript.

Оформить заказ FitText (он работает в IE, они как-то шарили их сайт) или BigText.

FitText позволит вам масштабировать некоторый текст по отношению к контейнеру, в котором он находится, в то время как BigText больше относится к изменению размера различных разделов текста в одной и той же ширине внутри контейнера.

BigText установит вашу строку точно в ширину контейнера, тогда как FitText будет меньше пикселя. Он начинается с установки размера шрифта на 1/10 ширины элемента контейнера. Это не очень хорошо работает со всеми шрифтами по умолчанию, но у него есть параметр, который позволяет вам уменьшить или увеличить "мощность" повторного размера. Он также позволяет установить минимальный и максимальный размер шрифта. Это займет немного времени, чтобы работать в первый раз, но отлично работает.

http://marabeas.io < - играя с ним в настоящее время. Насколько я понимаю, BigText вообще не работал в моем контексте.

Для тех из вас, кто использует Angularjs, здесь Angular версия FitText, которую я сделал.

Здесь LESS mixin, который вы можете использовать, чтобы сделать решение @humanityANDpeace немного более красивым:

@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);

И версия SCSS благодаря @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);

Ответ 2

Мой ответ не требует Javascript и зависит только от CSS3 (доступен в большинстве современных браузеров). Мне лично это очень нравится, если дизайн слишком сильно не полагается на Javascript.

Мой ответ - "чистый CSS3, не требуется Javascript -solution:

Решение, которое можно увидеть здесь (http://jsfiddle.net/uNF3Z/16/), использует следующие дополнения к стилям CSS (которые используют @media запрос CSS3, который)

@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;  } }

Это по сути означает, что размер шрифта настраивается на доступную ширину экрана. Эта настройка выполняется с шагом 100px (который достаточно тонко масштабируется для большинства целей) и охватывает максимальную ширину экрана 1700px, что, как я считаю, достаточно (2013), и может, добавив дальнейшие строки, будет еще больше улучшено.

Боковое преимущество заключается в том, что настройка размера шрифта происходит при каждом изменении размера. Эта динамическая настройка (потому что, например, окна браузера изменяются), возможно, еще не охвачена решением на основе Javascript.

Ответ 3

Я искал такую ​​же функциональность и нашел этот ответ. Тем не менее, я хотел дать вам ребята быстрое обновление. Это CSS3 vmin unit.

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

vmin означает "в зависимости от того, что меньше между 1% высоты ViewPort и 1% ширины ViewPort".

Дополнительная информация о SitePoint

Ответ 4

Ответ, который я представляю, очень прост, вместо использования "px", "em" или "%" я буду использовать "vw". Короче говоря, это может выглядеть так:  h1 {font-size: 5.9vw;} когда используется для целей заголовка.

Смотрите это: Демо

Подробнее: Основной учебник

Ответ 5

Здесь версия SCSS @Patrick mixin.

$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);