Question

响应式网页设计中的Firefox开发者版本有7个屏幕尺寸对和11种不同尺寸;需要多个媒体查询才能涵盖所列尺寸。

我为最大尺寸的格式创建了样式表。从那里，我为320px到640px范围的屏幕尺寸创建了一个单独的样式表。 html页面包含样式表的链接：

<meta name="viewport" content="width=device-width" />

和

<link rel="stylesheet" type="text/css" href="styles/320_home.css"          type="text/css" 
         media="screen and (max-width: 635px)" />

样式表具有以下格式：

@media screen and (max-width:640px){
   -- css statements--
}

当在Firefox中打开页面并在其RWD环境中进行测试时，它可以正常工作。

我使用完全相同的查询格式为下一个尺寸范围创建了第二个单独的样式表：在html页面上：

<link rel="stylesheet" type="text/css" href="styles/768_home.css" 
media= "screen and (min-width:768px) and (max-width:1200px) />

并在单独的样式表

上

@media screen and  (width:768px) and (max-width:1200px){
}

无法改变网页上的内容。

我把320px到640px的范围放在所有原始css下面的主样式表上：它工作得很好。

对第二个尺寸范围做了同样的事情：再次，无法改变网页上的东西。

现在，我查看了其他媒体查询问题。我完全按照建议做了;但是，我无法让网页响应多个媒体查询。作为解决方案谢谢。

附录：

这是一个内页;在着陆页上工作的多个单独的样式表，从最小宽度（320px）到最终宽度（1366px）进行了重大更改。这不再是多个查询表的问题，而是主样式表中的大量嵌入式查询。这是一个为什么书代码不能始终有效的问题。

Answer 1

您的问题是您已指定CSS仅在屏幕宽度为768像素时才能工作：

@media screen and  (width:768px) and (max-width:1200px){
  //CSS Here
}

我认为您正在寻找的是最小宽度为768像素，您需要这样做：

@media screen and (min-width:768px) and (max-width:1200px){
  //CSS Here
}

在768和1200像素宽的屏幕上工作。