Как сделать резиновый текст?

Тема в разделе "Верстка", создана пользователем Sankaboy, 24 июн 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Sankaboy

    Sankaboy Постоялец

    Регистр.:
    1 фев 2012
    Сообщения:
    112
    Симпатии:
    3
    Привет. К примеру я заюзал резиновый бэкграунд, пару блоков на процентах. Но текст при изменении размера окна браузера или же размера монитора(не важно) остается одним и тем же. Как сделать чтобы текст тоже сжимался, разжимался(менялся размер текста)?
     
  2. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    991
    Симпатии:
    267
    Парни, не флудите. Нормально задан вопрос.

    Сделать можно на java script. Опрашиваем ширину и/или высоту каждого из блоков и в соответствии с ней задаем нужный размер шрифта. Предварительно нужно создать какие-то условия в зависимости от которых будет выбираться нужный размер шрифта.

    Так же можно повесить действие на изменение ширины окна браузера. Опрашивать размерны нужных блоков и , соответственно, изменять размера шрифта. Возможно, пересчет придётся делать в несколько проходов.
     
  3. MrJenika

    MrJenika Создатель

    Регистр.:
    4 мар 2012
    Сообщения:
    31
    Симпатии:
    3
  4. korkunov

    korkunov

    Регистр.:
    6 фев 2009
    Сообщения:
    306
    Симпатии:
    82
  5. Kol0book

    Kol0book Постоялец

    Регистр.:
    17 июл 2009
    Сообщения:
    55
    Симпатии:
    5
    Все верно
    Код:
    @media screen and (max-width: 960px) {font-size: 20px}
    Только для старых браузеров css3 не прокатит
    Код:
    <script>
    function resize() {
    var width = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth))
    var tt = document.getElementById('text')
    if (width < 1024)
    tt.className = 'mintext'
    else
    tt.className = 'maxtext'
    }
    window.onresize = resize
    window.onload = function () {resize()}
    </script>
    <style>
    .mintext{font-size: 12px;}
    .maxtext{font-size: 14px;}
    </style>
    <div id="text">Какой-то там текст</div>
     
  6. gogikman

    gogikman Писатель

    Регистр.:
    14 июл 2010
    Сообщения:
    8
    Симпатии:
    0
    CSS3 Media Queries - самый оптимальный вариант для решения такой задачи
     
  7. vava1

    vava1 Постоялец

    Регистр.:
    21 апр 2013
    Сообщения:
    50
    Симпатии:
    3
    Что за бред вы советуете? А как же em, %??? этого достаточно, ну можно еще @media
     
  8. zerofirefox

    zerofirefox Постоялец

    Регистр.:
    11 июл 2008
    Сообщения:
    64
    Симпатии:
    4
  9. maxi2013

    maxi2013

    Регистр.:
    9 янв 2013
    Сообщения:
    497
    Симпатии:
    207
    r0m41k нравится это.
  10. aaliseyko

    aaliseyko Создатель

    Регистр.:
    17 ноя 2011
    Сообщения:
    17
    Симпатии:
    6
    Не достаточно, потому что и em и % задают высоту от "базы". Если при ресайзе база не меняется, то и остальное соответственно тоже.

    Я бы смотрел в сторону @media и JS, благо браузер можно прочекать на предмет поддержки чего бы то ни было. Хотя и на это можно не заморачиваться особо, ибо нечего из-за 0,000000001% (утрирую) пользователей напрягать остальных проверкой поддержки современности браузера.
     
    chipdimka и r0m41k нравится это.