Java教程

第 8 题：如何实现浏览器响应式布局？

本文主要是介绍第 8 题：如何实现浏览器响应式布局？，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

  • 使用媒体查询（@media）

    使用媒体查询可以根据用户不同分辨率展示不同的样式（即可实现不同的布局方式），从而达到响应式布局

    @media screen and (max-width: 1920px) {
    body {
        background: red;
    }
}

@media screen and (max-width: 1600px) {
    body {
        background: blue;
    }
}

@media screen and (max-width: 1440px) {
    body {
        background: green;
    }
}

@media screen and (max-width: 960px) {
    body {
        background: yellow;
    }
}

这篇关于第 8 题：如何实现浏览器响应式布局？的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航