我正在练习使用 flexbox 构建页脚。我目前正在构建的页脚在桌面上按预期工作,但在移动设备上却不行。
这是:http://codepen.io/FullMetalAlchemist3/pen/bwzEYL/
当我在桌面上调整页脚大小时,此媒体查询有效并且从列布局到行的过渡是流畅的:
@media (min-width: 850px) {
.footer {
display: flex;
padding: 10px;
flex-flow: row;
}
但是,如果在移动设备上进行检查,页脚内容会保留在一行中。我不明白为什么要这样做。在移动设备上,页脚应该在一列中,因为 850 像素以下的屏幕将运行原始的 flex-flow,它被设置为列布局:
.footer {
display: flex;
padding: 10px;
flex-flow: column;
justify-content: center;
}
我认为问题与页脚未正确收缩有关。手机上页脚的宽度是 980px,所以我明白为什么它仍然排成一排,但到底为什么这么宽?为什么它不像在桌面窗口中调整大小时那样缩小?
如有任何帮助,我们将不胜感激!
最佳答案
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我认为您的 header 中缺少此元标记。仅仅因为手机很小并不意味着它的像素比显示器少——实际上有些甚至更多。
关于html - 为什么这个 flexbox 页脚不能在移动设备上工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40262287/