zoukankan      html  css  js  c++  java
  • Bootstrap如何配合字体自适应

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

    div {
        font-size: 12px;
        -webkit-transition: font-size 0.2s ease-out;
    }
    
    @media only screen and (max- 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- 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- 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- 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- 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- 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- 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- 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- 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- 320px) {
        div {
            font-size: 16px;
        }
    
        .hb-size {
            font-size: 12px;
        }
    
        .hb-num {
            font-size: 12px;
        }
        .hb-info
        {
            font-size: 12px;
        }
    }
  • 相关阅读:
    Extending Markov to Hidden Markov
    Logistic Regression – Geometric Intuition
    【计算机视觉】会议投稿相关推荐
    NP难问题求解综述
    PCA的数学原理
    Brief History of Machine Learning
    图像局部特征点检测算法综述【修正排版】
    thinkphp输出表格
    1503162139-ny-分数拆分
    C++中经常使用到宏
  • 原文地址:https://www.cnblogs.com/LoveQin/p/8818293.html
Copyright © 2011-2022 走看看