Css I'；我正试图使用媒体查询使我的网站具有响应性，而我'；我失败了。我想知道我是否'；我错过了一些简单的东西？

我正在处理的网站有一个背景图像和一个单独的标题图像，我想使用媒体查询来获取它们以及标题图像上的文本，以便根据不同的屏幕适当调整大小。我根据不同的教程使用了很多选项，但我仍然不认为我的样式表能够正常工作。下面是我的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"/>

我对尝试使用媒体查询进行响应性设计是相当陌生的，所以我知道我犯了一些无知的错误。任何帮助都将不胜感激。谢谢。

我想应该是

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

---

有关更多信息，请参阅。

我在使用带有wordpress主题的媒体查询时遇到问题，我通过下载手机专用插件并以这种方式创建样式表来修复它。这就是所谓的“移动css”。实际上，我在插件中创建了一些媒体查询，比如iPad上的横向与纵向等