Question

我想创建一个响应式网站。如果浏览器是移动大小的，则应使用iPhone样式列表视图显示内容如果浏览器是桌面大小的，则应使用选项卡显示内容：

enter image description here

这样做的最佳方式是什么？ 我不想为Mobile / Desktop使用单独的文件。我希望它能够做出回应。

以下是我所做的一些研究。

尝试1：纯CSS解决方案。

纯CSS解决方案将是最好的，因为CSS提供媒体查询，可以轻松切换布局。 CSS offers methods for creating tabs。但它似乎没有为iPhone风格列表提供方法。（您几乎可以使用accordion list伪造它，但这并不会将用户带到像真正的iPhone应用程序那样的单独页面上。

尝试2：Jquery解决方案（see Fiddle）

Jquery Mobile提供了一种创建iPhone style list views
Jquery UI提供了一种创建tabs的简便方法。
Enquire.js提供与媒体查询等效的Javascript。

In this fiddle，我试图将Jquery Mobile和Jquery Ui结合起来。 Enquire.Js用于根据屏幕调用必要的库。

调用库时，它将改变dom结构。因此，必须删除不需要的库，否则如果用户重新调整浏览器的大小（即在移动桌面之间切换），则未使用的库将破坏被调用库的冲突。

在我的小提琴中，我试图这样做，但它似乎不起作用：

$(document).ready(function() {

        enquire.register("screen and (max-width: 600px)", function() {
    $('script[src~="jquery-ui.js"]').remove();
    $('link[rel=stylesheet][href~="jquery-ui.css"]').remove();    
     $('head').append('<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />');    
     $('head').append('<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"><\/script>');   
        $("#tabs").tabs("destroy");            
    }).listen();


       enquire.register("screen and (min-width: 601px)", function() {
    $('script[src~="jquery.mobile-1.0a3.min.js"]').remove();
    $('link[rel=stylesheet][href~="jquery.mobile-1.0a3.min.css"]').remove();    
    $('head').append('<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />');        
     $('head').append('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><\/script>');    
    $("#tabs").tabs();

    }).listen();

});

即使删除了未使用的库，也会导致新库发生冲突。此外，您必须在调用任何布局之前重新调整浏览器的大小。如果用户没有重新调整浏览器的大小，则内容将不会被设置为样式。

尝试3：Dom克隆（see Fiddle）

此尝试类似于尝试2，除了在页面加载时它将DOM存储在变量中。然后，当用户重新调整浏览器大小时，现有DOM将替换为存储的DOM。我已经按照方法大纲here进行了操作，但它似乎不起作用。 dom被删除而不是被替换。

我很感激任何有用的，因为我一直在撕扯我的头发找到解决方案！（我知道我已经提出了类似的问题，但我觉得这个新问题不同，足以保证一个新帖子。）

尝试4：动态分配数据属性

Jquery mobile使用标记中的数据属性来使脚本工作。我已经尝试动态应用它们，因此只有当浏览器处于移动大小时才会将它们写入文档。但是，当重新调整浏览器大小时，桌面选项卡仍然会损坏。

Answer 1

我认为这里不需要重新发明轮子。响应式设计已经存在了很长一段时间，已经风靡Web开发。那就是说，我建议你可以使用任何一个。响应式框架的工作在那里你喜欢。我个人最喜欢和我建议使用的是Twitter Bootstrap框架工作。当您了解它们的工作原理时，它具有令人难以置信的智能轻量且易于使用。您不必担心iPhone和桌面。 Twitter Bootstrap也适用于其他设备，例如table et al。

现在直接提到你的问题，因为你想在Mobile和Desktop上显示相同的标签内容，而没有两个单独的html文件。以下是我作为示例演示为您提供的内容。

我有一个包含所有内容的简单html文件，它使用twitter bootstrap作为响应式框架工作。

<强> HTML

请看小提琴，粘贴在这里太大（内容）：）

<强> CSS

除了加载bootstrap.css和bootstrap-responsive.css之外，我需要自定义CSS来适应我的页面布局。

CSS最重要的部分就是媒体查询。我指定设备宽度，并要求CSS以这种方式显示，此设备宽度已达到。媒体查询语法如下：

@media  (max-width:480px) {
   // Custom for device that has width 480px;

}

现在iPhone的布局宽度为480像素，当我的页面被查看的设备时，我想要将我的元素设置为适合480px的屏幕。

以下是该页面的自定义CSS：

.container {
    margin-top: 10px;
}
.ora, .ban, .man{display:none;}
.fruit-content{width:100%;}
li{display:inline-block;width:24%;text-align:center;border-bottom:1px solid #fff;background: #C0C;}
ul.upperul{margin:0 0 0 0px;width:103%;}
.custom-row{border:1px solid green;}
.selected{background: #c0c0c0;}
@media  (max-width:480px) {
    li{display: block;width: 100%;text-align: left;}
    .custom-row{border:1px solid #000000;}
    ul.upperul{margin-left: 0px;width:100%;}

}

<强> JS

现在出现了关于切换选项卡式内容的功能部分。我使用jQuery只需几行代码就可以用标签式方式设置内容：

$(function() {
    $("li").live("click" , function() {
     $(this).css("background","#c0c0c0").siblings().css("background","#C0C");
     $(".des").hide().eq($(this).index()).show();
    })
    .eq(0).addClass('selected');
});

最后，这些作品的整个构建块都在这里：

DEMO

全屏结果为Here，调整浏览器大小并查看内容的行为方式和响应能力。

Answer 2

我肯定会去Attemp 1并试图模拟一个“单独的页面”。在这种情况下，它更轻巧，更灵活。

在我看来，尝试2和3有太多的开销。

有关UX的一些想法

从UX的角度来看，我会说以上面显示的方式改变导航的概念并不好。在调整浏览器窗口大小时，用户可能会感到困惑。

如何在两个基于Jquery的布局之间切换（使用桌面和移动时）

2 个答案:

有关UX的一些想法