根据浏览器窗口大小删除或隐藏图像答案

【问题标题】：Remove or hide images based on browser window size根据浏览器窗口大小删除或隐藏图像
【发布时间】：2015-07-27 13:40:12
【问题描述】：

在一段 Angular JavaScript 中，有一个 ng-repeat 命令打印一行小图像。

当浏览器窗口重新调整大小时，我需要这条线不要重叠成两行。因此，如果大小变得太小，与其将其中一些向下推到第二行，不如将它们隐藏或删除其中一些。

我怎样才能做到这一点？

是否可以只使用 CSS 来做到这一点？

【问题讨论】：

请努力并返回一个具体的问题。
这叫“响应式设计”。
我能帮助你的最好的方法是查看媒体查询和显示，css的可见性属性。
可能正在寻找这个 -> stackoverflow.com/questions/11962837/…
你可以简单地使用css3 @media queries

标签： javascript html css angularjs

【解决方案1】：

是的，只有 css 是可能的。您必须使用media 查询并决定您希望元素出现和消失的范围

@media (min-width: 500px) and (max-width: 600px) {
        myelement {
          display: none;
        }
 }

@media (min-width: 700px) and (max-width: 1000px) {
        myelement {
          display: block;
        }

 }

这些也将在调整浏览器大小时处理。

【讨论】：

【解决方案2】：

这称为responsive design。您需要使用 CSS media queries 或 bootstrap 之类的 CSS 库，其中包含 responsive classes 来根据目标窗口/设备大小隐藏/显示元素。

媒体查询示例：

@media (max-width: 700px) {
  img#yourImage {
    display: none;
  }
}

工作媒体查询演示：http://codepen.io/Chevex/pen/oXxKLe

引导示例：

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
  </head>
  <body>
    <img class="hidden-xs" src="http://i.imgur.com/1XKZPVe.png" />
  </body>
</html>

工作引导演示：http://codepen.io/Chevex/pen/ZGWgpb

Bootstrap 只是在自己的样式表中使用媒体查询。为一系列不同的设备提供带有预定义类的样式表真是太好了，这样您就不必自己制作媒体查询了:)

【讨论】：

【解决方案3】：

是的，它可以用 css 完成

@media (min-width: 700px) { 
   .myClass{
       display: none;
   }
}

【讨论】：