响应式设计的多媒体查询声明

Question

@media only screen and (min-device-width: 480px) {
    #something{display:none !important;
}

我使用它作为我的移动css设置，但它仍然以更大的屏幕尺寸（超过480px）影响我的元素，我是否必须在更大的尺寸上声明另一组媒体查询。

Answer 1

是的，你做...尝试使用这样的东西：

@media (max-width: 480px){}
@media (min-width: 480px) and (max-width: 720px){}
@media (max-width: 720px){}
@media (max-width: 940px) and (min-width: 720px){}

Answer 2

使用以下内容： -

@media (max-width: 480px) {
    #something{display:none !important;
}

Answer 3

是的，对于您需要声明的每个范围， 你声明只有大于480px，如果你想要一个范围，就这样做： @media only screen   和（最小宽度：480px）和（最大宽度：480px）{}

Answer 4

每台设备都遵循特定的视口范围，例如移动设备遵循的视域范围从320px到480px，然后是480px至650px的制表符。某些小屏幕笔记本电脑使用的视域高达840px，普通13-15英寸笔记本电脑的使用视口最大为1350像素，并且更大的屏幕使用1920像素视口，因此您可以相应地声明媒体查询 @media（最小宽度：320像素）和（最大宽度：480像素）{enter code here @media (min-width: 480px) and (max-width: 720px){在此处输入代码} @media (min-width: 720px) and (max-width: 950px){在此处输入代码} @media (min-width: 950px) and (max-width: 1150px){在此处输入代码{{ 1}}在此处输入代码} @media (min-width: 1150px) and (max-width: 1350px){在此处输入代码`}