使网站响应的最简单方法是什么？ [关闭]答案

【问题标题】：What is the easiest way to make a website responsive? [closed]使网站响应的最简单方法是什么？ [关闭]
【发布时间】：2015-07-21 11:09:03
【问题描述】：

我是一个初学者，我已经创建了一些我的网站，但我意识到它不会在所有设备和屏幕尺寸下都能很好地看到。我愿意在我的网站上重新启动，并实现这个响应式框架，但我不知道从哪里开始，如何开始，使用哪个框架，或者关于创建响应式网站的任何事情。我研究过 Bootstrap，但我看到你必须使用他们提供的导航栏，我不希望那样。我想创建由我定制的整个网站。我看过一些网站，当你在手机上时，它会自动转到 m.facebook.com 之类的东西，他们这样做的方法是什么？他们是否为每个决议重写了整个代码？请帮忙！

【问题讨论】：

如果您使用 Bootstrap，则不必使用他们的导航，只需找到另一个或创建您自己的导航。您可以只使用 Bootstrap 进行网格布局。如果您想自己完成所有操作，请查看 CSS 媒体查询
@Maxxi 如果我使用 bootstrap 进行网格布局，并自定义构建我的网站，它在所有其他屏幕尺寸上的效果是否仍然良好？
Bootstrap 组件是移动响应的，但这取决于您如何使用它们。您需要查看“自定义”位的 CSS 媒体查询
您可以完全从头开始构建自己的响应式导航栏，但对于大多数目的，我想您可以重新命名他们的导航栏并提出满足您需求的内容。例如，查看these themes——他们都使用了常用的 Bootstrap 导航栏，但已经完全定制了它。

标签： html twitter-bootstrap responsive-design

【解决方案1】：

如果您不想使用引导程序，则可以改用标准媒体查询“流体设计”。我用一些有趣的东西创建了一个易于理解的小提琴供您试用http://jsfiddle.net/xfobotx6/7/

记得将 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 放在 html 的 <head> 部分中以使这项工作正常进行。

edit 强烈的意见基于“什么是最简单的方法？”我只是给了你一个“a”方式的例子，但由你决定什么对你来说最简单:)

【讨论】：

【解决方案2】：

如果您对响应式设计感兴趣，可以使用@Adam Buchanan Smith 的回答。如果没有，只需使用 javascript 执行类似的操作，即可将您所说的页面从 facebook.com 重定向到 m.facebook.com

if (screen.width <= 800) {
            window.location = "page.aspx";
        }

通过执行此操作，您必须至少制作 2 个版本的网站（桌面版和移动版）。从好的方面来说，您可以完全自定义它。

【讨论】：