我为小屏幕写媒体查询但它也适用于大屏幕如何停止它

Question

@media only screen and (min-width: 320px), (min-width: 360px), (min-width: 375px), (min-width: 600px){
some CSS   
 }

Answer 1

请在说明中描述您的问题，而不仅仅是标题。

但问题是你只使用最小宽度。因此，只要屏幕是您在媒体查询中设置的最小宽度，就会显示代码。基本上所有屏幕的最小宽度都是320px，因此您需要添加最大宽度。

修改

为了描述您的媒体查询，它说： 如果屏幕是一个屏幕，最小宽度为320px

OR最小360px宽

OR最小375px宽

OR最小600px宽

如果在其中一个中插入最大宽度，则其他的仍然适用。

因此，要创建适用于320px和768px之间的媒体查询，您可以执行以下操作：

@media(max-width: 768px){}

这也会使屏幕低于320px，但基本上没有。

或者你可以写：

@media(min-width:320px) and (max-width:768px){}

这只针对最小320像素宽，最大宽度为768像素的屏幕。

Answer 2

基本上你在这段代码中做了什么

@media only screen and (min-width: 320px), (min-width: 360px), (min-width: 375px), (min-width: 600px){
some CSS   
 }

是：

@media only screen and (min-width: 320px){
some CSS   
 }

如上所述，您需要使用或覆盖最大宽度或覆盖所需的mediq查询来删除此行为

@media only screen and (min-width: 600px){
 new css
}

也许您应该首先阅读一些有关媒体查询以及移动/桌面的文档。