media-query.md

[utterances-bot]

media-query.md

https://meowrain.github.io/?tid=blog%2F%E4%B8%8D%E9%94%99%E7%9A%84%E4%B9%A6%2F%E9%98%AE%E4%B8%80%E5%B3%B0%E8%80%81%E5%B8%88%E7%9A%84%E4%B9%A6%2Fcss%E6%95%99%E7%A8%8B%2Fmedia-query.md

[meowrain]

    // 移动端
    @media only screen and (max-width: 767px) {
        ...移动端样式...
    }

    // pad端（平板）
    @media only screen and (min-width: 768px) {
        ...pad端样式...
    } 

    // PC端 、一般屏幕
    @media only screen and (min-width: 992px) {
        ...PC端 、一般屏幕样式...
    }

    // PC端 、大屏幕
    @media only screen and (min-width: 1200px) {
        ...PC端 、大屏幕样式...
    }

    // PC端、超大屏幕
    @media only screen and (min-width: 1680px) {
        ...超大屏幕样式...
    }

作者：拾光精品 链接：https://juejin.cn/post/7252683094204055612 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[meowrain]

https://juejin.cn/post/6844903630655471624?searchId=202401231335374698B4115045EC1B83B7 响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）