Использование Bootstrap, но Text not Responsive

Я работаю над школьным проектом: http://lauralynn87.github.io/WSP/Project/index.html

и я использую фреймворк Bootstrap 3.0 - и почти все отзывчиво, но текст.

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

Любая помощь приветствуется.

Спасибо.

Ответы

Ответ 1

Шрифты не реагируют, если вы используете % или em и т.д.

Если вы хотите изменить размер шрифта в разных размерах экрана/окна, вам нужно использовать медиа-запросы в CSS.

Например:

@media all and (max-width: 1200px) { /* screen size until 1200px */
    body {
        font-size: 1.5em; /* 1.5x default size */
    }
}
@media all and (max-width: 1000px) { /* screen size until 1000px */
    body {
        font-size: 1.2em; /* 1.2x default size */
        }
    }
@media all and (max-width: 500px) { /* screen size until 500px */
    body {
        font-size: 0.8em; /* 0.8x default size */
        }
    }

Числа - это, конечно, только примеры.

Ответ 2

Вот мобильный первый фрагмент css для экрана, используя только размеры устройства Bootstrap. Комментарии:

  • Bootstrap не масштабирует типографию в ответ на изменения размера экрана.
  • Вам действительно нужен такой же размер шрифта на 27-дюймовом мониторе, как смартфон? Я вижу несколько хороших дизайнов, где имеют смысл разные размеры шрифтов для разных экранов. Тестирование докажет ваш дизайн правильно или неправильно.
  • Вы действительно хотите, чтобы размер шрифта и шрифта был одинаковым? Экран и печать - разные звери. Если вы заботитесь о печати, вы должны проверить его отдельно.
  • Масштабирование шрифта, которое я использую ниже, произвольно - там нет волшебства.

.

/* xs < 768 */
@media screen and (max-width: 767px) {
    body {
        font-size: 0.9em;
    }
}

/* sm */
@media screen and (min-width: 768px) {
    body {
        font-size: 1em;
    }
}

/* md */
@media screen and (min-width: 992px) {
    body {
        font-size: 1.2em;
    }
}

/* lg */
@media screen and (min-width: 1200px) {
    body {
        font-size: 1.3em;
    }
}

A jsfiddle, который показывает эффекты: https://jsfiddle.net/stevetarver/9a8ym3hL/embedded/result/. Обратите внимание, что медиа-запросы изменяют только размер шрифта th, td, а не тело, как показано выше.

Ответ 3

Я бы предложил Fittext jQuery plugin сделать все текстовые ответы по умолчанию. Для этого требуется всего 2 файла js и одна строка кода jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
          $("body").fitText();
  });
</script>

Обратитесь Fittext

Ответ 4

вы можете использовать типографию с видовым пространством.

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

размер текста изменяется в соответствии с портом представления (ширина и высота браузера).

подробнее https://css-tricks.com/viewport-sized-typography

Демо: https://css-tricks.com/examples/ViewportTypography/

Ответ 5

добавьте собственные медиа-запросы, чтобы изменить размер шрифта в зависимости от размера экрана. см. здесь