任何人都可以提供一些提示，说明如何在查看/调整到移动视口时有效地将我的 CSS 缩小到适当的文档布局？
我记得读过关于在 CSS 框上使用百分比的文章，但是当我尝试这个时，我无法正确堆叠。
任何帮助都会很棒！
问问题
5616 次
2 回答
4
据我所知，metadept 的回答是解决这个问题的最佳方法。但与大多数事情一样，你不应该在不需要的时候重新发明轮子。碰巧有很好的 CSS 框架可以使用媒体查询构建响应式网站。我个人最喜欢的是Bootstrap。您特别感兴趣的是脚手架部分。
通过将正确的类附加到您的元素，您可以在各种显示模式（桌面、平板电脑等）中重新排列事物，并且默认情况下它会自动对布局进行一些非常智能的事情。
其他不错的选择（感谢 metadept 建议我添加这些）是Zurb Foundation和960 Grid System。
使用这些框架中的任何一个，不要忘记将其添加到您的head!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这迫使网页以许多现代智能手机的宽度显示。
于 2013-04-04T14:38:54.140 回答
3
您应该阅读CSS Media Queries。这些允许您为高于/低于特定宽度、高度和纵横比的屏幕设置条件样式。
正如其他人所提到的，有许多响应式网格框架（参见 jmeas 的回答）可以为您处理这个问题。是否要使用它们取决于您的部署要求以及您想要自定义布局的程度。
于 2013-04-04T14:35:20.647 回答