我建立的网站，并希望使其移动响应。如何创建具有响应式设计的网站？

它完全适用于Chrome和Firefox，但不适用于移动设备。

我在Inspect上进行了测试，但它在桌面浏览器上正常工作，但不适用于手机。

我该如何解决这个问题？

2016-05-16 Guru

您的问题非常广泛。有很多方法可以处理响应式网站设计，但是StackOverflow的目的是为非常结构化和特定的问题和疑问提供具体和特定的答案。你可以分享你的尝试，这不完全正确吗？ – GMchris

当我将浏览器宽度调整为320px时，它在桌面上完美运行。但在移动不能正常工作。我怎样才能解决这个问题？有什么工具像浏览器在移动浏览器上使用Inspect Elements？ – Guru

再一次，很难说没有看到它，甚至没有描述过什么是“突破”。如果可以的话，发布一个jsfiddle。 – GMchris

首先，您应该在HTML页面上添加一个视口。

键入此头标记内：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

然后，我个人认为这是更好，如果你链接bootstrap.css文件。我也推荐使用这样的CSS媒体屏幕：

@media screen and (max-width: 800) { /* The CSS codes when the device is less than 800 go here */ } 至少，这就是我的做法。

你可以下载或观看我在YouTube上看到的视频。我不记得它的名字或链接，但它的长度超过一个小时，这家伙正在制作一个健身房网站的网页。

我强烈建议您自己输入这些内容，而不是复制和粘贴它，这将有助于您理解每件事情的含义，不要忘记代码，以便在简单的情况下不要提及这些类型。

2016-05-16 17:16:01

感谢您的帮助。但我没有要求移动响应标准。在桌面上调整窗口大小工作正常。但不是在手机上。 – Guru

我还没有看到有人在几年内使用大写的文件扩展名... – Martin

嗯，我不确定，但我认为你的手机可能会比800大，所以你可能想要添加另一个更大的媒体屏幕或编辑这一个。纠正我，如果我误解了这个问题。 –

如何创建具有响应式设计的网站？