10

我想创建一个响应式网站。如果浏览器是移动设备大小的，内容应该以 iPhone 样式列表视图显示如果浏览器是桌面大小的，内容应该用标签显示：

在此处输入图像描述

这样做的最佳方法是什么？ 我不想为移动/桌面使用单独的文件。我希望它反应灵敏。

这是我所做的一些研究。

尝试 1：纯 CSS 解决方案。

纯 CSS 解决方案将是最好的，因为 CSS 提供媒体查询，可以轻松在布局之间切换。CSS 提供了创建标签的方法。但它似乎没有为 iPhone 样式列表提供方法。（您几乎可以使用手风琴列表来伪造它，但这不会像在真正的 iPhone 应用程序上那样将用户带到单独的页面）。

尝试 2：Jquery 解决方案（见 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 克隆（参见 Fiddle）

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

我将不胜感激，因为我一直在努力寻找解决方案！（我知道我问过一个与此类似的问题，但我觉得这个新问题与此不同，足以保证发布新帖子。）

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

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

4

2 回答 2

4

我认为这里没有必要重新发明轮子。响应式设计已经存在了很长一段时间，并且已经席卷了 Web 开发。也就是说，我建议你可以使用任何一个没有。你喜欢的响应式框架作品在那里工作。我个人最喜欢和建议使用的是 Twitter Bootstrap 框架。当您了解它们的工作原理时，它非常聪明，重量轻且易于使用。您无需担心 iPhone 和 Desktop。Twitter Bootstrap 迎合其他设备以及表格等。

现在直接回答您的问题，因为您想在移动设备和桌面设备上显示相同的选项卡式内容，而不需要两个单独的 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 像素，当正在查看我的页面的设备时，我想设置元素的样式以适应 480 像素的屏幕。

这是页面的自定义 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');
});

最后，这些部分的整个构建块都在这里：

演示

全屏结果在此处，调整浏览器大小并查看内容的行为方式和响应速度。

于 2012-11-13T01:29:24.150 回答
0

我肯定会选择 Attemp 1 并尝试模拟“单独的页面”。在这种情况下，它更加轻巧和灵活。

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

关于 UX 的一些想法

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

于 2012-11-07T19:05:23.343 回答