Question

任何人都可以提供一些提示，以便在查看/调整大小到移动视口时如何使我的CSS有效缩小到适当的文档布局？

我记得读过关于在CSS盒子上使用百分比的内容，但是当我尝试使用它时，我无法正确堆叠。

任何帮助都会很棒！

Answer 1

您应该阅读CSS Media Queries。这些允许您为高于/低于特定宽度，高度和宽高比的屏幕设置条件样式。

正如其他人所提到的，有许多响应式网格框架（请参阅jmeas的回答）可以为您处理。是否要使用它们取决于您的部署要求以及您希望自定义布局的程度。

Answer 2

据我所知，metadept的回答是解决这个问题的最好方法。但是和大多数事情一样，你不应该在不需要的时候重新发明轮子。事实上，有很好的CSS框架可以使用媒体查询构建响应式网站。我个人最喜欢的是Bootstrap。您特别感兴趣的是the Scaffolding section.

只需在您的元素中附加正确的类，您就可以在各种显示模式（桌面，平板电脑等）中重新排列内容，并且默认情况下会自动使用布局执行一些非常智能的操作。

其他好的选择（感谢metadept建议我添加这些）是Zurb Foundation和960 Grid System。

使用这些框架中的任何一个，不要忘记将其添加到head！

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这会强制网页以许多现代智能手机的宽度显示。