css - 平板电脑断点在响应式 CSS 流体网格设计中失败

Question

使用 Fluid Grid 系统在 Dreamweaver CS6 中创建了一个响应式站点。所有断点最初都工作正常，我有 3 个独立的桌面、平板电脑和移动布局；使用不同的分辨率，每个 Fluid Grid Layout Div 标签将在页面上重新排列到不同的列中。页面上的每个 div 都在 CSS 中设置了 width: __%;，以便它们随着浏览器的大小扩展和收缩。

页面上的一切都是响应式的并且工作正常；然而，在某种意义上，我在开发过程中的某个地方丢失了 Tablet 断点。当浏览器达到应该将页面分成平板电脑布局的 768px 宽度时，它会直接跳转到移动格式，这在 480px 之前是不会发生的。

在 Dreamweaver 中，我可以查看我为 Tablet 布局设置的格式，在设计模式下它会显示 DIV 列和内容的正确布局；然而，一旦我将 DW 置于实时模式，或在浏览器中预览，它就不再具有平板电脑功能，只有桌面和移动格式。

我将发布 @media 查询的 CSS 代码和后续的 .gridContainer 代码 - 尝试查看是否可以找到解决方案而不必发布整个CSS 代码，因为有很多。如果我需要编辑我的问题并包含更多代码，请告诉我 - 也许是一些 DIV 的截断代码及其对每个布局的响应值？如果可以帮助解决此问题，我很乐意发布更多信息。

提前感谢您的任何支持或建议!

CSS:

/* Mobile Layout: 480px and below. */

.gridContainer:before, .container:after {
    display:table;
    content:"";
    zoom:1 /* ie fix */;
}

.gridContainer:after {
    clear:both;
}

.gridContainer {
    width: 96%;
    padding-left: 1.5%;
    padding-right: 1.5%;
    border:1px solid #00133e;
    background: #004aa1;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer:before, .container:after {
    display:table;
    content:"";
    zoom:1 /* ie fix */;
}

.gridContainer:after {
    clear:both;
}

.gridContainer {
    width: 96%;
    padding-left: 1.5%;
    padding-right: 1.5%;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer:before, .container:after {
    display:table;
    content:"";
    zoom:1 /* ie fix */;
}

.gridContainer:after {
    clear:both;
}

.gridContainer {
    width: 96%;
    padding-left: 1.5%;
    padding-right: 1.5%;
}
}

Answer 1

找到解决方案:

在我的移动布局 CSS 样式代码的末尾附近，有一个额外的大括号。移除支架，响应性恢复。

非常简单的解决方案；感谢@MrRO 为我指明了正确的方向!