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

本文分享一套完整 CSS @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;
    }
}