与元素大小相关的CSS

Question

我有一个元素，里面包含几个元素，如下所示：

当宽度超过1000px时，我想并排显示这两个元素，使条形元素向右对齐（向右浮动）。
如果宽度小于1000px，我想在容器的中心显示这两个元素，如下所示：

我尝试过使用它，但它不起作用：

var result = document.getElementsByClassName("time-target");

angular.element(result).bind('resize', function(size){
  console.log('size ' + size);
  //add the classes to the element - float right\ center - according to the size
});

Answer 1

尝试使用media-query代替js代码：

    @media only screen and (max-width : 1000px) {
    .element{
     //center your div
      }
    } 

了解media-query： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

注意！

对于media-query，您必须包含此meta：

<meta name="viewport" content="width=device-width, initial-scale=1">