bootstrap文字自适应教程

1、引入bootstrap,搭建基本的bootstrap结构，因为JS加载比较慢，这里将JS放到下面</body>之前。

2、HTML代码。

<div class="container">

<h2 class="tab-h2">「这里测试文字自适应」</h2>

<p class="tab-p">这里测试文字自适应，这里测试文字自适应，这里测试文字自适应！

</div>

3、CSS代码。

.tab-h2 {

color:#0059b2;

font-size:20px;

letter-spacing: 1px;

text-align:center;

margin:45px 0 10px;

}

.tab-p {

font-size: 15px;

letter-spacing: 2px;

text-align:center;

color: #999;

margin:15px 0 45px;

}

注意:bootstrap是以移动端优先设计，css样式默认的都是移动端的所以自适应的话还得写不同设备下的CSS

4、当设备为平板或者屏幕大于768小于992时优先加载这里的CSS样式。

/* 小屏幕（平板，大于等于768px） */

@media (min-width: 768px) {

.tab-h2 {

font-size:26px;

}

.tab-p {

font-size: 16px;

}

｝

5、当设备为桌面显示器或者屏幕大于992px时，优先加载这里的CSS样式

@media (min-width: 992px) {}

/* 中等屏幕（桌面显示器，大于等于992px） */

@media (min-width: 992px) {

.tab-h2 {

font-size:28px;

}

.tab-p {

font-size: 17px;

}

}

6、代码写完保存，从浏览器中查看效果。