媒体查询

媒体查询

媒体查询可以在指定的设备上使用对应的样式才代替原来的样式

比如我们可以让一个网页在屏幕小于1000px 时颜色变化为pink色

@media screen and (max-width: 480px) {
    body {
        background-color: pink;
    }
}

也可以让一个固定的盒子变化,在宽度小于800px时宽度变为100px,在宽度小于650px时就隐藏。

@media screen and (max-width: 800px) {
  .div{
    width:100px;
  }
}

@media screen and (max-width: 650px) {
  .div{
    display:none;
  }
}

媒体查询可以让我们响应式的开发页面，知道大小就可以在不同尺寸的页面展现出不一样的样式