响应式列未在移动设备上正确显示

Question

我有一个四列页脚，它在平板电脑上折叠成两列，在移动设备上折叠成一列。

视口元标记和样式表如下：

<link rel="stylesheet" href="style/main.css" type="text/css" media="screen">
<link rel="stylesheet" href="style/tablet.css" type="text/css" media="screen and (max-width: 960px)">
<link rel="stylesheet" href="style/mobile.css" type="text/css" media="screen and (max-width: 640px)">

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width">

在桌面上更改屏幕尺寸时响应正常，如下所示：

• Tablet, as viewed on desktop
• Mobile, as viewed on desktop

但是，在移动设备上，页脚列显示为两列，而不是一列：

• Website on mobile device

这是来自main.css的css：

div#footer div.wrapper div.column {
    float: none !important;
    display: table-cell;
    width:25%;
    box-sizing:border-box;
    padding: 0 10px;
    border-right: 1px solid rgba(255,255,255,0.1);
}

这是来自tablet.css的css：

div#footer { padding: 10px; }

div#footer div.wrapper div.column { width:50%; margin-bottom: 20px; border: none; float: left !important; }
div#footer div.wrapper div.column:nth-child(3) {
    clear:both;
}

...这是来自mobile.css的css：

div#footer { padding: 10px; }
    div.column {
        width:100% !important;
        float:none !important;
    }

最后是 HTML（带有占位符文本）：

<div id="footer">
    <div class="wrapper">
        <div class="column">
            <h4>Important Links</h4>
            <ul>
                <li><a href="/">Homepage</a></li>
                <li><a href="/privacy">Privacy Policy</a></li>
                <li><a href="/terms">Terms of Use</a></li>
                <li><a href="/contact">Contact Us</a></li>
            </ul>
        </div>
        <div class="column">
            <h4>Important Links</h4>
            <ul>
                <li><a href="/">Homepage</a></li>
                <li><a href="/privacy">Privacy Policy</a></li>
                <li><a href="/terms">Terms of Use</a></li>
                <li><a href="/contact">Contact Us</a></li>
            </ul>
        </div>
        <div class="column">
            <h4>Important Links</h4>
            <ul>
                <li><a href="/">Homepage</a></li>
                <li><a href="/privacy">Privacy Policy</a></li>
                <li><a href="/terms">Terms of Use</a></li>
                <li><a href="/contact">Contact Us</a></li>
            </ul>           
        </div>
        <div class="column" style="border-right: none;" >           
            <h4>Header</h4>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

如何确保移动设备显示来自mobile.css 的格式，就像我在桌面浏览器上模拟移动设备时一样？

---

更新：以下更新后的mobile.css css 代码仍会产生两列：

div.column {
    width:100% !important;
    float:none !important;
    clear: both !important;
    display: block !important;
}

Answer 1

将此添加到 mobile.css

div#footer div.wrapper div.column {
    display: block;
}

当你使用 display: table-cell 时，它会导致

像 元素一样工作

【讨论】：

Answer 2

我之前遇到过 display: table-cell; 的奇怪问题。对于移动 CSS 尝试重申平板电脑样式和display: block;

div#footer { padding: 10px; }
div#footer div.wrapper div.column:nth-child(3) {
    width:100% !important;
    float:none !important;
    clear: both;
    display: block;
}

Answer 3

脱掉你float:none !Important，它会起作用的

在移动 CSS 上试试这个。

div#footer { padding: 10px; }
div#footer div.wrapper div.column {
        width:100% !important;
    }