css媒体查询--每日一个前端知识点

之前一直有听说过媒体查询，但是没有好好去了解过这个东西，今天花了时间来了解了解。

先贴一段代码

// @media screen and (min-width: 300px)and (max-width: 600px) {
//     background: #000000;
// }

// @media screen and (max-width: 1080px)and (min-width: 800px) {
//     background: #ff0004;
// }

// @media screen and (max-width: 800px)and (min-width: 600px) {
//     background: #40ff1e;
// }

这段代码可以看出区别仅仅只在max-width和min-width以及它们下面的样式，我们再来看看它们对应的效果

从 图片中不难看出，这实际就是一个简陋的类似bootstrap栅格化布局的东西。我们可能通过@media这个东西来针对pc和移动端实现响应式布局