根据 div 的大小显示项目答案

【问题标题】：Displaying items depending on the size of the div根据 div 的大小显示项目
【发布时间】：2018-09-18 23:15:41
【问题描述】：

我正在编写将在 Web 应用程序的许多小部件中使用的组件。由于 div 大小，有什么方法可以改变元素的可见性？

<div class="container" style="width:100%">
  <div>elements to display when width is less than 400px</div>
  <div>elements to display when width is more than 400px</div>
  <div>another div</div>
</div>

是否有可能在例如 css 中？我阅读了有关媒体查询的内容，但元素的可见性仅取决于使用它的小部件大小，仅此而已。

【问题讨论】：

这应该会给你一些好主意：stackoverflow.com/questions/17904018/…
与浏览器大小有关。不是我的情况。它仅取决于使用它的小部件的大小。
使用 javacript。询问容器的宽度，如果是这个宽度，设置元素显示块等
在您的小部件上使用 iframe，您将能够处理媒体查询
你在使用引导程序吗？你也可以使用Grid classes。它们会在不同的设备（移动设备、平板电脑、台式机）上以不同的方式显示您的内容

标签： css angularjs html dom

【解决方案1】：

我没有运行它，但我希望你知道如何实现它。我不知道纯 css 中的解决方案，但使用 jQuery 实现起来并不难：

if( parseInt(jQuery('.container').css('height')) > 400){
    jQuery('.container').css('visibility', 'hidden');
} else{
    jQuery('.container').css('visibility', 'visible');
}

【讨论】：

【解决方案2】：

您可以为此使用指令：

var app = angular.module('myApp', []);
app.directive('myDirective', ['$window', function($window) {
  return {
    link: link,
    restrict: 'A'
  }
  function link(scope, element, attrs) {
    scope.windowWidth = $window.innerWidth; // init

    /* window width or element width jQLite CSS magic goes here */
    angular.element($window).bind('resize', function() {
      scope.windowWidth = $window.innerWidth; // re-calculate
      scope.$apply(); // re-draw
    });
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
  <div class="container" style="width:100%;">
    <div my-directive ng-show="windowWidth < 400">
      elements to display when width is less than 400px
    </div>
    <div my-directive ng-show="windowWidth > 400">
      elements to display when width is MORE than 400px
    </div>
  </div>
</div>

【讨论】：