-2

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

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

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

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

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

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

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

谢谢您的帮助。

4

5 回答 5

1

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

如果你是肯定的，这还不够。我会研究重定向和用户代理检测，以根据用户代理将您的用户重定向到不同的页面。

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

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

于 2014-04-17T12:42:39.273 回答
1

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

于 2014-04-17T12:16:26.627 回答
0

尝试引导

Bootstrap 使前端 Web 开发更快更容易。它适用于各种技能水平的人、各种形状的设备和各种规模的项目。

于 2014-04-17T12:45:08.757 回答
0

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

特别是引导程序将允许您根据正在呈现页面的设备宽度指定不同的布局。更多信息在这里- 调整您的浏览器宽度以查看它的实际效果。

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

于 2014-04-17T12:29:56.403 回答
0

我不知道这对你的项目是否足够，但你可以在某种程度上使用 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;
      }
    }

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

于 2015-05-26T07:47:42.913 回答