媒体查询响应式布局

@media only screen and (min-width:280px) and (orientation:portrait) {
    html {
        font-size: 27.5px !important;
    }
}

@media only screen and (min-width:320px) and (orientation:portrait) {
    html {
        font-size: 32px !important;
    }
}

@media only screen and (min-width:360px) and (orientation:portrait) {
    html {
        font-size: 36px !important;
    }
}
@media only screen and (min-width:375px) and (orientation:portrait) {
    html {
        font-size: 37.5px !important;
    }
}

@media only screen and (min-width:400px) and (orientation:portrait) {
    html {
        font-size: 40px !important;
    }
}
@media only screen and (min-width:411px) and (orientation:portrait) {
    html {
        font-size: 41.1px !important;
    }
}

@media only screen and (min-width:480px) and (orientation:portrait) {
    html {
        font-size: 48px !important;
    }
}

@media only screen and (min-width:540px) and (orientation:portrait) {
    html {
        font-size: 54px !important;
    }
}

@media only screen and (min-width:580px) and (orientation:portrait) {
    html {
        font-size: 58px !important;
    }
}

@media only screen and (min-width:600px) and (orientation:portrait) {
    html {
        font-size: 60px !important;
    }
}

@media only screen and (min-width:730px) and (orientation:portrait) {
    html {
        font-size: 73px !important;
    }
}

@media only screen and (min-width:768px) and (orientation:portrait) {
    html {
        font-size: 76.8px !important;
    }
}

@media only screen and (min-width:900px) and (orientation:portrait) {
    html {
        font-size: 90px !important;
    }
}

@media only screen and (min-width:992px) {
    html {
        font-size: 99.2px !important;
    }
}