Question

使用Fluid Grid系统在Dreamweaver CS6中创建响应式站点。所有断点最初都运行良好，我有3个独立的桌面，平板电脑和移动布局;使用不同的分辨率，每个流体网格布局Div标签将在页面上重新排列成不同的列。页面上的每个div都在CSS中设置为width: __%;，以便它们随浏览器大小扩展和收缩。

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

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

我将发布@media查询和后续.gridContainer代码的CSS代码 - 试图查看是否可以找到解决方案，而不必发布整个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中，我相信你已经错过了一个花括号，这是为了关闭<480宽度设备的样式。

background: #004aa1;
} <-- Here one more "}" needed

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

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

.gridContainer:before, .container:after {

Answer 2

找到解决方案：

接近我的移动布局CSS样式代码的末尾，有一个额外的大括号。删除了支撑，响应性返回。

非常简单的解决方案;感谢@MrRO让我指向正确的方向！

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

2 个答案: