响应式 HTML（和 CSS）答案

【问题标题】：Responsive HTML (and CSS)响应式 HTML（和 CSS）
【发布时间】：2014-06-01 16:39:45
【问题描述】：

我不熟悉响应式网站，我想开始创建一个考虑所有屏幕的网站。

显然媒体查询是可行的方法，但它们只涉及 CSS。

在我当前的项目中，我想根据页面宽度以不同的方式组织页面（完全与设备无关）。问题是，在小宽度上，我希望 HTML 布局完全改变，所以我必须使 HTML “响应”，并且它应该根据网站宽度而改变。

我怎样才能做到这一点？是否有任何 js 库（如果可能，但不是强制性的 jQuery）可以根据页面的宽度“服务”另一个 html 页面？

整个网站都应该以这种方式构建，因此脚本应该不仅仅是一个小工具，它应该足够坚固以允许整个网站依赖它。当然，它应该适用于任何设备、屏幕或浏览器。

有些人会说我正在寻找自适应技术而不是响应式技术，但我相信这是这两者之间的混合，因为元素通常仍然是响应式的，但在一些关键断点之间，它确实会适应和改变 html .

我阅读了很多关于不同技术的信息，但我找不到适合我需要的东西。任何线索将不胜感激。

感谢您的帮助。

【问题讨论】：

这对于 CSS 媒体查询和 JavaScript 都是可能的 - 但可能不太实用。尝试查看 Twitter Bootstrap 和 Zurb Foundation 之类的东西，它们都为设计/开发提供了完整的 CSS 框架
尝试了解什么是 CSS mediaquery ，你就会对响应式网站有所了解

标签： html css responsive-design breakpoints adaptive-design

【解决方案1】：

您所描述的是自适应交付。您想要的是使用服务器端语言检测用户代理字符串，然后根据设备是手机、平板电脑还是台式机有条件地呈现您的模板。实际上，您将在屏幕之间共享大量代码，但您可能有不同的导航布局，或者选择不在较小的屏幕上显示更丰富的功能。这种方法不仅节省了一堆隐藏/显示代码，而且在较小的屏幕上节省了大量开销，否则您将在这些屏幕上加载无论如何都会一直隐藏的内容。

【讨论】：

这正是我想要的（但与设备无关，因为我不想在任何地方指定任何设备）。但我仍在寻找可以做到这一点但尚未找到的东西。如果我没记错的话，用户代理将隔离浏览器或设备，而不是宽度，这就是我需要的。我找到了“response.js”，但它不会切换整个 html 标签，它只允许更改一些 div 标签和 src。
这很难。如果您想真正使用它，可以使用 Backbone 或 Angular 等设置客户端视图，然后使用窗口调整大小事件来触发替代内容加载。

【解决方案2】：

您是否可以使用现有的 CSS 框架（例如 Bootstrap）来实现跨各种目标浏览器宽度和设备类型的响应式设计？

Bootstrap 尤其可以让您根据正在呈现页面的设备宽度指定不同的布局。 More information here - 调整您的浏览器宽度以查看它的实际效果。

如果在评估了现有框架之后，您仍然决心开发自己的框架，那么您至少可以使用 Bootstrap 或其他框架中的技术作为您自己的起点。

【讨论】：

我阅读了 Bootstrap 文档，我得到了响应式的东西和工具箱的概念，但我仍然不知道如何根据窗口的宽度改变我的 HTML。
我猜 Bootstrap 的目的是让您无需担心根据用户使用的视口/浏览器宽度生成不同的 Html。如果您需要更明确地了解以特定宽度显示的内容，则可以求助于响应式 CSS 实用程序类（请参阅上面的更多信息链接）。
似乎仍然被误解的是，我不是在寻找一个只在不同宽度下看起来不错的网站，我希望它在不同宽度下的结构看起来完全不同，同时在一些关键断点之间做出响应.因此，这不是关于隐藏/显示/将某些元素从一个尺寸移动到另一个尺寸以适应空间，而是关于在两种尺寸之间更改整个 HTML 并带来完全不同的体验。我以为我们可以根据大小更改整个 HTML，但似乎不可能。如果 Bootstrap 符合我的需要，我可以使用它，但事实并非如此。

【解决方案3】：

您可以使用 CSS 和媒体查询做很多事情，以根据设备和屏幕宽度（“完全”）改变您的页面布局。如果我是你，我会更深入地挖掘这些技术可以提供的可能性。

如果你是肯定的，这还不够。我会调查 Redirects and User-Agent Detection 以根据用户代理将您的用户重定向到不同的页面。

如果您正在寻找一个完整的框架来处理您需要的内容（重定向和动态内容，具体取决于用户代理或宽度）以及更多，您应该查看AngularJS。

您当然可以根据您的标准使用纯 JS 进行一些 DOM 操作，但是随着您的项目变得越来越大，您可能会受到伤害。

【讨论】：

【解决方案4】：

试试Bootstrap

Bootstrap 让前端 Web 开发变得更快、更轻松。它适合各种技能水平的人、各种形状的设备和各种规模的项目。

【讨论】：

对不起，这是一个广告，不是我的问题的答案。
在 MIT 许可的代码
我所说的商业广告的意思不是你为它付费，而是你给我的答案只是一个通用的流行语，而不是我的问题的答案。对于其中包含“响应式”或“网格”一词的任何问题，您的答案都是相同的。顺便说一句，谢谢你的回报......你没有投反对票，因为我的问题不相关，而是因为我说你的问题是。
打开这个页面 (getbootstrap.com/getting-started) 并调整你的页面大小。看看什么引导程序改变了屏幕大小的布局动态。它使页面适合并在每个屏幕上看起来都很不错
这更有帮助，谢谢。现在，是我还是唯一改变的布局是css？就我所见，HTML 保持不变。如果有办法完全根据宽度更改html内容，我在但我阅读了文档并没有找到这个功能。在我看来，它是 100% 响应式和 0% 自适应的。我错了吗？

【解决方案5】：

我不知道这对您的项目是否足够，但您可以在某种程度上使用 CSS 来控制您希望在更小或更大的设备上显示或隐藏哪些标记。例如：

    <div class="mobile-only">
      <p>This content will only be visible on small screens such as mobile devices</p>
    </div>
    <div class="tablet-up">
      <p>This content will only be visible in tablet and larger devices</p>
    </div>

    /* media query for small screens, such as mobile devices */
    @media screen and (max-width: 767px) {
      .tablet-up {
        display: none !important;
      }
    }

    /* media query for tablet and larger devices*/
    @media screen and (min-width: 768px) {
      .mobile-only {
        display: none !important;
      }
    }

但是如果你有一个非常大的项目，请确保不要使用这种技术，你可能会导致性能窒息。

【讨论】：