Javascript 如何使我的ui视图具有角度响应性？

在Angular中，我有一个带有垂直选项卡的嵌套ui视图，在桌面上看起来像这样

在移动设备上，只有列表应显示为100%宽度

单击时，应该显示内容，如下所示。

我的问题是，在这种情况下，最好的做法是什么？ 目前，我正在使用enquire.js进行此操作，但这远远不是最佳的。 代码如下所示：

enquire.register("screen and (max-width: 480px)", {

match : function() {
    //FRANCHISE VIEW
    $( ".franchiseslide > a" ).click(function() {
        $(".franchiseselectlist").css('display','none');
        $(".franchisecontent").css('display', 'block');
        $(".franchisecontent").css('width', '100%');
        $(".viewback").css('visibility', 'visible');
    });

    $( ".viewback").click(function() {
        $(".franchiseselectlist").css('display','block');
        $(".franchisecontent").css('display', 'none');
        $(".viewback").css('visibility', 'hidden');
    });

},

---

我可以用ui路由器或ui sref活动解决这个问题吗？最理想的情况是，手机上的内容应该带有动画。实现ngAnimate的最佳方法是什么？

有两种基本方法可以使应用程序具有响应性

一种方法是使用browser agent字符串确定设备类型，并将用户重定向到适当的视图类型。例如，在angular中，可以根据浏览器类型将用户重新定向到不同的分部

---

另一种方法是使用css媒体查询，并根据设备上可用的不动产以不同方式显示同一页面。如果您不想编写自己的媒体查询，可以在Angularjs应用程序中加入现有的javascript库（如bootstrap）来处理此问题。

您当然可以使用CSS来完成吗？只需使用ng类和ng单击来处理触发CSS更改（以及可能的动画？）的交换类，我的建议是使用角度材质。它带有内置的指令，使响应性编码成为一个难题。这与Angular.js完全无关——一切都可以通过纯CSS和媒体查询完成。js是一个Javascript框架，它对响应性和布局一无所知。