Bootstrap типография и размер шрифта не меняются

Question

Bootstrap типография и размер шрифта не меняются

<BODY>
<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header col-xs-3 col-md-3">
        <a class="navbar-brand" href="#">My Brand</a>
    </div>
    <div class="col-xs-9 col-md-9">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>
</nav>
</BODY>

Это панель навигации, и я написал простой текст. Я ожидал, что размер шрифта изменится при изменении разрешения. Но размер шрифта всегда остается неизменным. Как можно автоматически изменять размер шрифта при изменении разрешения или размера экрана?

3

twitter-bootstrap resize font-size typography

Источник

user2554706 12 июл '14 в 04:47

1 ответ

Другие вопросы по тегам twitter-bootstrap resize font-size typography

user1751766 12 июл '14 в 10:48 2014-07-12 10:48 · Answer 1 · 2014-07-12 10:48

Вот одна из возможностей использования медиа-запросов: http://codepen.io/panchroma/pen/stBnj

Можно масштабировать размеры шрифта прямо пропорционально размеру окна просмотра или окна - удваивая размер окна, и размер шрифта изменяется. Этот подход обычно используется реже. Сложнее контролировать результаты, так как размер экрана становится очень большим или очень маленьким, и все современные браузеры теперь понимают медиа-запросы, чего не было пару лет назад.

Для конкретных случаев вы найдете всевозможные варианты, например, http://fittextjs.com/ чтобы масштабировать текст, чтобы заполнить доступное пространство.

Удачи!

CSS

@media (max-width: 480px) {
    .navbar li a{
    font-size:14px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .navbar li a{
    font-size:20px;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .navbar li a{
    font-size:26px;
    }
}

@media (min-width: 980px) {
  .navbar li a{
  font-size:30px;
  }
}