html - @media screen (min-width:1200px) 在 Chrome 中不起作用

Question

我在@media screen (min-width:1200px).

我为图像和 CSS 设置了 2 种属性（类），期望它使图像和“td”在调整屏幕大小时缩小图像，但当屏幕超过 1200 像素时它仍然显示图像的较小尺寸。

这是 HTML：

 <tr>
     <td class="indexphototd">
         <img class="indexphoto" src="../wp-content/uploads/2013/05/indexphoto300.jpg" /></td>
     <td>more stuff here</td> 
 </tr>

这是 CSS ：

/* for browsers larger than 1200px width */
@media screen (min-width: 1200px) {
     .indexphototd { 
            width:300px !important;
        }
     .indexphoto {
         width:300px !important;
      }
}


@media screen (min-width: 800px) {
     .indexphototd {
            width:200px !important;
        }
     .indexphoto {
         width:200px !important;
      }
}

Answer 1

您的媒体查询重叠：1200px 仍然是 800px 或更大。只需反转您的媒体查询。

@media screen (min-width: 800px) {
     .indexphototd {
            width:200px !important;
        }
     .indexphoto {
         width:200px !important;
      }
}

@media screen (min-width: 1200px) {
     .indexphototd { 
            width:300px !important;
        }
     .indexphoto {
         width:300px !important;
      }
}

Answer 2

如果屏幕宽度为 1400 像素，那么 800 像素也将在您当前的设置中生效。像这样交换它们：

@media screen (min-width: 800px) {
     .indexphototd {
            width:200px !important;
        }
     .indexphoto {
         width:200px !important;
      }
}
@media screen (min-width: 1200px) {
     .indexphototd { 
            width:300px !important;
        }
     .indexphoto {
         width:300px !important;
      }
}