移动/ glyphicon上的Bootstrap选项卡和字体大小调整

Question

我有4个标签，其中包含一个大的glyphicon和一些文字，它们在桌面上看起来很棒，但是一旦它缩小到移动尺寸，它看起来有点...... naff！

移动

桌面

移动电话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;
}

其余的只是标准的引导程序。

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;
    }
}

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

Answer 2

您可以使用此媒体查询： -

@media (max-width: 768px) {
.large {
    font-size: 10px; // Adjust this as required
   }
}