jquery - 移动/字形图标和字体大小调整上的 Bootstrap 选项卡

Question

我有 4 个选项卡，其中包含一个大字形图标和一些文本，它们在桌面上看起来很棒，但是一旦它缩小到移动尺寸，它看起来有点……讨厌!

移动

桌面

手机2

这是 html:

    <div class="row mt">
        <div class="col-md-12">
            <ul class="nav nav-tabs centered" data-tabs="tabs">
                <li class="active"><a href="#film" data-toggle="tab"><p><span class="fa fa-film large"></span></p><p>filming and editing</p></a></li>
                <li><a href="#autocue" data-toggle="tab"><p><span class="fa fa-list-alt large"></span></p><p>autocue services</p></a></li>
                <li><a href="#openers" data-toggle="tab"><p><span class="fa fa-play-circle-o large"></span></p><p>animation openers and stings</p></a></li>
                <li><a href="#cbt" data-toggle="tab"><p><span class="fa fa-laptop large"></span></p><p>computer based training</p></a></li>
            </ul>
        </div>
    </div>

这是唯一适用的自定义 CSS

.large {
    font-size: 100px;
}

剩下的只是标准的 Bootstrap 。

Answer 1

最好的方法是将媒体查询与 Bootstrap 自身的变量结合起来:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
.font-size: 11px; // regular text
.large {
    font-size: 20px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
    .font-size: 13px; // regular text
    .large {
        font-size: 50px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
    .font-size: 16px; // regular text
    .large {
        font-size: 100px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
    .font-size: 18px; // regular text
    .large {
        font-size: 150px;
    }
}

如您所见，您使用相同的查询设置了常规字体大小和“大”字体大小。根据您的需要调整各个值 :)