css - I'm trying to use media queries to make my site responsive, and I'm failing. I wonder if I'm missing something simple?

Question

The website that I'm working on has a background image and a separate header image, and I'd like to use media queries to get them as well the text on the header image to resize appropriately for different screens. I've played around with a lot of options based on different tutorials, but I still don't think my stylesheet is working as it should be. Here's an example of my 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; }
}

I've included the line in the header as well:

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

I'm fairly new to trying to use media queries for a responsive design, so I know I'm making some ignorant mistake. Any help would be very appreciated. Thank you.

Answer 1

我认为应该是

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

有关更多信息，请参阅此。

Answer 2

我在使用带有 wordpress 主题的媒体查询时遇到了问题，我通过下载一个特殊的手机插件并以这种方式创建样式表来修复它。它只是被称为“移动CSS”。实际上，我在插件中为 iPad 上的横向与纵向等内容创建了媒体查询。