Как изменить размер div пропорционально тексту внутри? - PullRequest
Новая
       5

Как изменить размер div пропорционально тексту внутри?

2 голосов
/ 21 апреля 2009

Предположим, что у нас есть элемент div с нулевым заполнением, абсолютным позиционированием, предварительно определенной шириной (в пикселях) и некоторым простым текстом внутри.

Теперь мы увеличиваем свойство CSS font-size текста на один пиксель. На какую меру я должен увеличить ширину div , чтобы ее расположение оставалось неизменным (т. Е. Слова не переходили с одной строки на другую из-за непропорционально увеличенной ширины)?

В случае, если это невозможно с размером шрифта CSS, заданным в пикселях, должно ли оно быть установлено в pt или em и почему?

Ответы [ 5 ]

6 голосов
/ 21 апреля 2009

Вы хотите указать ширину вашего div и размер шрифта в ems. Вот пример, где изменение размера шрифта в пикселях приводит к пропорциональному изменению размера div и текста без изменения макета: 

<html>
  <head>
    <title>Proportional Resize Example</title>
    <style>
      body {font-size:10px}
      div {
        position:absolute;
        top:100px;
        left:100px;
        width:20em;
        font-size:2em;
        padding:0;
        background:green}
    </style>
  <head>
<body>
  <div>
    This text will resize proportionally.
    This text will resize proportionally.
    This text will resize proportionally.
  </div>
</body>
</html>

В этом примере, если вы измените размер шрифта элемента body, все изменится пропорционально. Это потому, что ems, которые мы использовали для указания размеров в div, измеряются относительно размера шрифта в элементе body. Увеличение размера шрифта элемента body увеличивает размер элемента div в ширину и размер шрифта.

1 голос
/ 21 апреля 2009

Я никогда не видел ничего подобного в CSS или даже в качестве веб-приложения. Тем не менее, ответ на ваш второй вопрос, который лучше для шрифтов, em или pt, это em . Зачем? потому что em используется для измерения размеров шрифта и пропорционально дизайну: 1em - это 100% размера шрифта вашего основного текста. 1.1em - это 110%, 0.8em - это 80% и т. Д.

0 голосов
/ 21 апреля 2009

CSS сам по себе довольно статичен, как и div.

Нельзя сделать так, чтобы свойства одного элемента зависели от свойств другого. Даже для одного элемента вы не можете синхронизировать некоторые его свойства с другими.

Единственное встроенное решение, которое показывает некоторые характеристики автоматической настройки, - это таблица HTML, но вы, вероятно, не хотите использовать это.

Единственный способ добавить эту динамику - это использовать языки сценариев, такие как JavaScript.

0 голосов
/ 21 апреля 2009

Как сказал CLaRGe, em - это измерение, основанное на размере шрифта родительского элемента, поэтому это естественный выбор, если вы хотите, чтобы размер элемента был пропорционален размеру шрифта. Если вы измеряете размер шрифта в пикселях, то em - это размер шрифта в пикселях, например, 200px при размере шрифта 10px означает 20em.

0 голосов
/ 21 апреля 2009

Scriptaculous имеет встроенный эффект. Попробуйте. 

new Effect.Scale('id_of_element', percent, [options]);
...