流体网格布局控制

Question

很抱歉因为我讨厌提出问题，但有时却是最后的选择。

我正在把头发拉到这里，周末我读了几百页，但是我无法理解如何做到这一点。

我希望桌面和ipad有一个简单的4列“主页”登陆页面（子页面将恢复为2列 - 内容和侧边栏）。当用户登录iPhone时，我希望用户看到2列。

我已经设法让iphone使用网格系统显示4列的缩小版本，或者我设法让它显示1列，这两个都没有帮助我。

如果它有所帮助，我附上了我想要实现的目标的图像，但如果有人在这个领域有一些经验指出我正确的方向，我会非常感激，因为我无法弄明白。

我正在开发使用wordpress并尝试过bootstrap，响应主题和骨骼，并获得相同的结果。每个使用响应流体网格。我可能正在咆哮错误的树，但如果有人能指出我正确的方向，我会很感激。

Answer 1

您需要根据屏幕尺寸/设备宽度使用CSS媒体查询。

这将允许您的CSS设置每个设备上列的宽度...

http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

Answer 2

当前版本的Adobe Dreamweaver现在也支持所谓的流体网格布局＆＃34;值得一看的是这类问题。它们对于快速解决设备间布局问题也非常有帮助。您可以在一个界面中轻松地为移动设备，平板电脑和桌面进行设计！