Question

在一个角度JavaScript中，有一个ng-repeat命令可以打印一行小图像。

当浏览器窗口重新调整大小时，我需要此行不重叠为两行。因此，如果尺寸变得太小，而不是将其中的一些推入第二行，它应该隐藏它们或删除它们中的一些。

我怎样才能完成这项工作？

是否可以仅使用CSS执行此操作？

Answer 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;
        }

 }

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

Answer 2

这称为responsive design。您需要使用CSS media queries或bootstrap等具有responsive classes的CSS库来隐藏/显示基于目标窗口/设备大小的元素。

媒体查询示例：

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

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

Bootstrap示例：

<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>

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

Bootstrap只是在自己的样式表中使用媒体查询。为各种不同的设备准备一个带预定义类的样式表真是太好了，所以你不必自己制作媒体查询：）

Answer 3

是的，可以用css

完成

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

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

3 个答案: