Question

我对css表有一些奇怪的问题，我无法弄清楚。当窗口变小时，我使用以下内容在样式表之间切换。我打算在发生这种情况时更改页面上元素的排列。

index-large css使得个人资料和事件并排显示，而index-small css使事件显示在个人资料之上。问题是，当缩小浏览器时，转换正确发生，并且配置文件变得低于事件，但是当再次增加大小时，配置文件仍然低于事件。

我的代码是：

HTML：

<link type="text/css" rel="stylesheet" href = "index-screen-small.css" media="all and (min-device-width:1000px) and (max-width: 601px)">
<link type="text/css" rel="stylesheet" href = "index-screen-large.css" media="all and (min-device-width:1000px) and (min-width: 600px)">
...
<div id = "main">
<div id = events></div>
<div id = break></div>
<div id = profiles></div>
</div>

CSS：index-style-large：

#main{
   display = table;
}
#events{
   display = table-cell;
}
}
#break{
   display = none;
}
#profiles{
   display = table-cell;
}

CSS：index-style-small：

#main{
   display = table;
}
#events{
   display = table-cell;
}
}
#break{
   display = table-row;
}
#profiles{
   display = table-cell;
}

我不确定为什么会这样，非常感谢任何帮助

Answer 1

我认为错误在您的媒体查询中。应该是：

<link type="text/css" rel="stylesheet" href = "index-screen-small.css" media="all and (max-device-width:1000px) and (max-width: 600px)">

NOT：

<link type="text/css" rel="stylesheet" href = "index-screen-small.css" media="all and (min-device-width:1000px) and (max-width: 601px)">

这对你有用吗？

切换样式表时CSS表无法正常工作

1 个答案: