2

我使用 Angular 构建了一个独立的应用程序，它是响应式的（我没有做任何工作，只是使用了 row-fluid 等）。但是，现在我正准备将此独立应用程序安装到以不同语言构建的现有站点中。我用 angular 引导了一个 div，并将 Twitter Bootstrap css 仅应用于该 div。

然后，我使用 JQuery UI 和一些角度包装器指令来使应用程序所在的 div 可拖动、可放置和调整大小。但是，当我开始调整 div 的大小时遇到​​了问题。内置响应式设计响应整个窗口的大小，而不是 div 的大小。

对糟糕的 CSS 内联样式感到抱歉；我仍然只是四处乱窜以使其工作。这是我现在的代码 - 如果有人有一些意见，我会喜欢它。

部分只是在行流体标签和一些表格中具有一些形式。

关键是它是一个位于角落的工具，虽然很小，但可以扩展以显示更完整的视图。不过，当它很小的时候，一切都需要适合。

<div draggable droppable resizable class="bootstrapped" ng-app="myApp" id="ambatool">

 <div id="handle" style="background-color: gray; height: 50px; cursor: move"></div>
        <div style="padding:20px" class="container" id="maintool">
            <div ng-view>
            </div>

         <ul class="nav nav-tabs">
                <li><a href="#/detail" data-toggle="tab" id="detailtab">Detail</a></li>
                <li><a href="#/queue" data-toggle="tab" id="queuetab">Queue</a></li>
            </ul>
</div>
<div id="dock"></div>
4

1 回答 1

6

您希望实现的是响应式设计的下一步，并且不存在“开箱即用”。您需要元素媒体查询，而不是视口媒体查询，其中 div 的内容对其在视口中的容器大小做出反应，而不是视口本身。

灯丝组写了一篇关于如何实现一些变通办法的文章......在未来。

Smashing Magazine 最近写了Media Queries Are Not The Answer: Element Query Polyfill，它向您展示了如何使用Element Query polyfill来完成您所追求的工作。

于 2013-07-01T22:34:16.460 回答