Question

我试图根据浏览器宽度更改为div的上边距..使用一个查询和主css工作，但当我添加另一组屏幕宽度/相关样式时，他们没有响应。有多个设备宽度的最佳方法是，如果我想在屏幕调整时有4或5个不同的边缘顶部。

下面的代码是我尝试的一个例子，我不太确定我做错了什么...非常感谢所有帮助。

 @media screen and (min-width: 1px) and (max-width: 410px){
.inner-cont{margin-top:130px;}}

@media screen and (min-width:411px) and(max-width: 1000px){
.inner-cont{margin-top:50px;}}

我是新手，但我正在学习很多，非常感谢所有人在本网站上寻求所有帮助。非常感谢你们！

Answer 1

此处没有空格，因此media查询失败

and(max-width: 1000px)
 --^--

Demo （调整小提琴窗口以查看效果）

此外，我没有标记，所以如果你试图在margin-top:130px;元素上应用inline，它就会失败，继承也很重要，媒体查询的顺序也很重要，但就问题与提供的代码一致，我只能看到的问题是缺少空间..

Answer 2

您缺少only个关键字但是 your media-query works, see here

例如

 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

see examples here

see demo here （更改浏览器宽度以理解）

如何为我的网站设置多个浏览器宽度媒体查询？

2 个答案: