How*_*ulf 1 html javascript css angularjs
在一个角度JavaScript中,有一个ng-repeat命令可以打印一行小图像.
当浏览器窗口重新调整大小时,我需要此行不重叠为两行.因此,如果尺寸变得太小,而不是将其中的一些推入第二行,它应该隐藏它们或删除它们中的一些.
我怎样才能完成这个？
是否可以仅使用CSS执行此操作？
是的,只有css是可能的.您必须使用媒体查询并确定您希望元素显示和消失的范围
@media (min-width: 500px) and (max-width: 600px) {
myelement {
display: none;
}
}
@media (min-width: 700px) and (max-width: 1000px) {
myelement {
display: block;
}
}
这些也将在浏览器调整大小时处理.
这称为响应式设计.您将需要使用CSS 媒体查询或CSS库(如bootstrap),它具有响应类,可根据目标窗口/设备大小隐藏/显示元素.
媒体查询示例:
@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只是在自己的样式表中使用媒体查询.为各种不同的设备准备一个带预定义类的样式表真是太好了,所以你不必自己制作媒体查询:)