[英]@media screen (min-width:1200px) not working in Chrome
I have a problem in @media screen (min-width:1200px)
. 我在
@media screen (min-width:1200px)
。
I have set 2 kinds of attributes (classes) for an image and the in the CSS, expecting it to make the image and the "td" in which I put the image smaller when resizing the screen, but when the screen is more than 1200px still it shows the smaller size of the image. 我在CSS中为图像和设置了2种属性(类),希望在调整屏幕大小时(但当屏幕大于1200px时)使图像和“ td”(使图像变小)它仍然显示较小的图像尺寸。
This is the HTML : 这是HTML:
<tr>
<td class="indexphototd">
<img class="indexphoto" src="../wp-content/uploads/2013/05/indexphoto300.jpg" /></td>
<td>more stuff here</td>
</tr>
This is the CSS : 这是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;
}
}
Your media queries overlap: 1200px is still 800px or larger. 您的媒体查询重叠:1200px仍为800px或更大。 Simply reverse your media queries.
只需撤销您的媒体查询即可。
@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;
}
}
If a screen is say 1400px in width then the 800px will also take effect in your current setup. 如果屏幕的宽度为1400像素,那么800像素也会在您当前的设置中生效。 Swap them around like so:
像这样交换它们:
@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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.