全套@media响应式布局代码方案分享

// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 15px;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size:15px;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 15px;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 15px;;
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 15px;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 15px;;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 15px;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 15px;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 15px;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 15px;
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 15px;
    }
}

// 768-1024
@media only screen and (min-width: 767px) and (max-width: 1000px){
    html {
        font-size: 15px;
    }
}