css - 我正在尝试使用媒体查询来使我的网站响应，但我失败了。我想知道我是否遗漏了一些简单的东西？

Question

我正在处理的网站有一个背景图片和一个单独的标题图片，我想使用媒体查询来获取它们以及标题图片上的文本，以针对不同的屏幕适本地调整大小。我已经尝试过很多基于不同教程的选项，但我仍然认为我的样式表没有发挥应有的作用。这是我的 CSS 示例:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
 img {max-width: 90%;}
   #wrapper { max-width: 90%; }
   #wrapperbg { max-width: 90%; }
   #header { max-width: 90%; }
   #navlist { max-width: 90%; font-size: 80%; font-family: agency, 

sans-serif; }
   #navlist2 { max-width: 90%; }
   #navlist li {max-width: 10%; font-size: 1.5em; font-family: sans-serif; }
}

我也在标题中包含了这一行:

<meta name="viewport" content="initial-scale=1.0, width=device-width"/>

我对尝试将媒体查询用于响应式设计还很陌生，所以我知道我犯了一些无知的错误。任何帮助将不胜感激。谢谢。

Answer 1

我觉得应该是

@media screen and (min-width:768px) and (max-width:1024px) and (orientation : portrait)
{
    //...
}

有关更多信息，请参阅 this .