Bootstrap如何配合字体自适应？

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