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

如果屏幕的宽度为1400px，则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;
      }
}

@media屏幕（min-width：1200px）无法在Chrome中运行

2 个答案: