Question

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

显然媒体查询是要走的路，但它们只涉及CSS。

在我当前的项目中，我想根据页面的宽度（完全与设备无关）来组织页面。问题是，在小宽度上，我希望HTML布局完全改变，所以我必须制作HTML＆＃34;响应＆＃34;以及它应该根据网站宽度改变。

我怎样才能实现这一目标？是否有任何js库（jQuery，如果可能但不是强制性的）将＆＃34;服务＆＃34;另一个html页面根据页面的宽度？

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

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

我读了很多关于不同技术但我找不到适合我需要的东西。任何领导都将不胜感激。

感谢您的帮助。

Answer 1

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

Answer 2

您可以使用CSS和媒体查询做很多事情来改变页面布局（＆＃34;完全＆＃34;），具体取决于设备和屏幕宽度。如果我是你，我会深入研究这些技术可以提供的可能性。

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

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

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

Answer 3

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

Bootstrap特别允许您根据呈现页面的设备宽度指定不同的布局。 More information here - 调整浏览器宽度以查看其实际效果。

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

Answer 4

尝试Bootstrap

Bootstrap使前端Web开发更快速，更轻松。它适用于各种技能水平的人，各种形状的设备以及各种规模的项目。

Answer 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;
      }
    }

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

响应式HTML（和CSS）

5 个答案: