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

【问题标题】：Tablet Break Point Fails in Responsive CSS Fluid Grid Design响应式 CSS 流体网格设计中的平板电脑断点失败
【发布时间】：2015-10-04 21:27:57
【问题描述】：

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

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

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

我将发布 @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%;
}
}

【问题讨论】：

标签： css html responsive-design dreamweaver fluid-layout

【解决方案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 {

【讨论】：

很好——但是这个位置不应该有第二个花括号，因为 CSS 代码开始时没有任何 @media 代码。手机版是默认的，然后在481px开始推送到平板模式。

【解决方案2】：

找到解决方案：

在我的移动布局 CSS 样式代码接近尾声时，有一个额外的花括号。移除支架，响应能力恢复。

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

【讨论】：