正文

Bootstrap如何配合字体自适应

IP云
IP云V管理员/6 阅读
09/04
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Bootstrap框架中，字体不会自适应，及时使用rem都不行，那么就只有使用媒体查询来做。这样可能会有点麻烦，但是这是我目前找到的一个方法直接上代码了

div {
font-size: 12px;
-webkit-transition: font-size 0.2s ease-out;
}@media only screen and (max-width: 1200px) {
div {
font-size: 39px;
} .hb-size {
font-size: 39px;
} .ft-num {
font-size: 38px;
}
.hb-num {
font-size: 37px;
}
.hb-info
{
font-size: 12px;
}
}@media only screen and (max-width: 1100px) {
div {
font-size: 38px;
} .hb-size {
font-size: 38px;
} .hb-num {
font-size: 37px;
}
.hb-info
{
font-size: 12px;
}
}@media only screen and (max-width: 1000px) {
div {
font-size: 37px;
} .hb-size {
font-size: 37px;
} .hb-num {
font-size: 36px;
}
.hb-info
{
font-size: 12px;
}
}@media only screen and (max-width: 900px) {
div {
font-size: 36px;
} .hb-size {
font-size: 36px;
} .hb-num {
font-size: 35px;
}
.hb-info
{
font-size: 12px;
}
}@media only screen and (max-width: 800px) {
div {
font-size: 35px;
} .hb-size {
font-size: 35px;
} .hb-num {
font-size: 34px;
}
.hb-info
{
font-size: 12px;
}
}@media only screen and (max-width: 700px) {
div {
font-size: 30px;
} .hb-size {
font-size: 30px;
} .hb-num {
font-size: 29px;
}
.hb-info
{
font-size: 12px;
}
}@media only screen and (max-width: 600px) {
div {
font-size: 20px;
} .hb-size {
font-size: 22px;
} .hb-num {
font-size: 21px;
}
.hb-info
{
font-size: 12px;
}
}@media only screen and (max-width: 500px) {
div {
font-size: 22px;
} .hb-size {
font-size: 17px;
} .hb-num {
font-size: 13px;
}
.hb-info
{
font-size: 12px;
}
}@media only screen and (max-width: 400px) {
div {
font-size: 19px;
} .hb-size {
font-size: 15px;
} .hb-num {
font-size: 12px;
}
.hb-info
{
font-size: 12px;
}
}@media only screen and (max-width: 320px) {
div {
font-size: 16px;
} .hb-size {
font-size: 12px;
} .hb-num {
font-size: 12px;
}
.hb-info
{
font-size: 12px;
}
}