Question

大家好，我想问一些关于媒体查询的问题。

我正在一个已经对它做出一些响应的网站上工作。而且我被迫在clild主题上编写代码，而不是在原始文件上编写代码，所以当我尝试放入一些新的媒体查询时，它就无法工作。

问题出在哪里

网站defaut媒体查询

@media only screen and (max-width: 3000px)
#logo {
text-align: center;
padding-right: 120px !important;
float: none !important;
}

目标是徽标，我想写这样的东西来改变它在土地空间和肖像上。

@media screen only (max-width:480px){
#logo{
  margin-left:-23%!important;
}
}

@media screen only (max-width:320px){
#logo{
  margin-left:-39%!important;
}
}

当我尝试使用min-width而不是max-width时，它会起作用，但会使其余部分混乱。

我对max-width的想法是 max-width:320px - ＆gt;当320以下的屏幕分辨率使用代码时，如果不使用480px的代码。

这是错的？

Answer 1

你可以这样做：

@media only screen and (max-width:480px){
  #logo {
    margin-left: 0 !important;
  }

  #header {
    padding-left: 0 !important;
  }
}

你不需要320px的任何媒体查询（所以你应该删除320px的媒体查询）

获得有关媒体查询的清晰视图

1 个答案: