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

Bootstrap如何配合字體自適應