为什么在此代码示例中现在可以使用媒体查询？

问题描述

此媒体查询不起作用吗？我希望当视口大于800px时div变为300x300和红色：将其展开至全屏观看问题。

.test{
  width:600px;
  height:600px;
  background-color:grey;
}

@media (width: 800px){
  .test{
    width:300px;
    height:300px;
    background-color: red;
  }
}

<div class="test"></div>

解决方法

在媒体查询中，您通过指定@media (width: 800px) {}添加了错误。您需要解决此问题-@media (max-width: 800px){}。

P.S。如果您在媒体查询中指定@media (min-width: 800px){}，则红色方块将显示在大屏幕上，而灰色方块将显示为800像素。

.test{
  width:600px;
  height:600px;
  background-color:grey;
}

@media (max-width: 800px){
  .test{
    width:300px;
    height:300px;
    background-color: red;
  }
}

<div class="test"></div>