html - 与元素大小相关的 CSS

Question

我有一个元素，其中包含如下几个元素:

当宽度超过 1000px 时，我想并排显示这 2 个元素，以便 bar 元素向右对齐(向右浮动)。
如果宽度小于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
      }
    } 

了解媒体查询: 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">