如何实现响应能力？答案

【问题标题】：How do I achieve responsiveness?如何实现响应能力？
【发布时间】：2016-10-31 18:46:59
【问题描述】：

这是我的测试站点：http://www.manukarki.com

它可以响应桌面大小调整和 mobiletest.me 等在线移动仿真，但对于真实设备（我的 moto G 第一代）它不起作用。目前对此的媒体查询是@media only screen and (max-width: 640px)。现在我也尝试了“max-device-width”，但它发生了一些变化，但远不及屏幕调整大小和 mobiletest.me 测试。我真的不想用bootstrap、foundation等，我真的想从头开始学习。

【问题讨论】：

你能把SourceCode和CSS一起发布吗
一些老浏览器比如ie8不支持媒体查询，所以你应该使用respond.js。此外，您应该/可以有多个 @media 子句来定义不同屏幕宽度（如桌面、平板电脑、移动设备）上的 css 行为。否则你就在正确的轨道上。
为什么不使用 Bootstrap 或其他响应式框架。这会让你轻松一些。
嗯，其实我是想先搞懂这些东西..
Manu，你完全正确。如果您了解如何编写代码而不是如何使用预构建的框架，那么您将成为一个更好的开发者，在我看来，这些框架会提供太多的臃肿。

标签： css responsive-design media-queries responsive

【解决方案1】：

您需要在页面的<head> 添加视口元标记。

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

您可以在mozilla developer network 上阅读更多内容

【讨论】：

非常欢迎您，这基本上会强制内容缩放到设备视口的大小，同时尊重您的 CSS 属性。

【解决方案2】：

http://www.manukarki.com/mobile.css 上的链接 css 文件重定向到 404 错误（/code.js 也是如此）。您确定您正确上传了这些文件吗？

【讨论】：

css 实际上是 main.css，我还没有创建应该存在的 javascript 文件。

【解决方案3】：

Bootstrap，只有 CSS 你可以做很多事情。或者一路走下去，也使用他们的 Javascript。

但您似乎不想使用它。好吧，现在是你的时间了（当其他人完成了艰苦的工作时，不要认为有必要重新发明轮子）。看看他们是如何做到的，可能会提供有用的信息。

【讨论】：