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

Question

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

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

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

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

在此先感谢您的支持或建议！

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 样式代码的末尾，有一个额外的大括号。删除了括号，响应 returns。

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

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

Tablet Break Point Fails in Responsive CSS Fluid Grid Design

html

css

dreamweaver

fluid-layout

responsive-design