Question

我的图像旁边有垂直排列的文本，当窗口太小时会下降，并在窗口缩小时继续包装每个单词。

#header-wrapper {
  height: auto;
  vertical-align: middle;
  font-size: 0;
}

#header-txt {
  display: inline-block;
  font-size: initial;
  *zoom: 1;
  *display: inline;
  vertical-align: middle;
  line-height: 1;
}

.h1-header-txt {
  margin: 0 0 0;
}

#header-img {
  display: inline-block;
  *zoom: 1;
  *display: inline;
  vertical-align: middle;
  padding-right: 15px;
}

<div id="header-wrapper">
  <div id="header-img"><img src="//cdn.shopify.com/s/files/1/2215/1909/files/icon-alivehm_4fbccdb6-8ec5-4aaa-b6af-e6915d2c0315_large.png" /></div>
  <div id="header-txt">
    <h1 class="h1-header-txt">HEADER THAT CHANGES SIZE</h1>
  </div>
</div>

我一直在尝试这样做，以便当文本首次下降时，它会触发css中的一些更多的参数，这些参数将应用于.h1-header-txt，因此我可以修改颜色，边距等。现在，我已经环顾四周，this之类的媒体查询在我的代码上正常工作，但是他们并没有完全解决我的问题，因为我希望查询触发的像素宽度因标题的大小而异。

媒体查询仍然可以解决我的问题，我可能会遗漏一些明显的东西，但我找不到正确的参数来检查我的标题是否已到达窗口的边缘。

如果有一个有用的条件，我可以解析成@media，或者其他方式来实现这一点，我没有看到，任何输入都将不胜感激。

Answer 1

您可以尝试使用Javascript（jQuery）来监控屏幕宽度。我所做的是总宽度或图标和标题，并与屏幕宽度进行比较。一旦宽度小于总宽度，就可以控制字体大小的.active类。

$(document).ready(function() {
  $(window).resize(function() {
    minitorScreen();
  });

  minitorScreen();

  function minitorScreen() {
    var $headerWidth = $(".h1-header-txt").innerWidth();
    var $screenWidth = $(document).innerWidth();
    var $iconWidth = $("#header-img").innerWidth();

    var $hstotalWidth = $iconWidth + $headerWidth

    console.log("icon + header = "+ $hstotalWidth );
    console.log("screen = "+ $screenWidth);

    if ($iconWidth + $headerWidth + 20 >= $screenWidth) { //additional 20px for precautionary measures
      alert("you have reached the width limit");

      $(".h1-header-txt").addClass("active");
    } else {
      $(".h1-header-txt").removeClass("active");
    }
  }
});

#header-wrapper {
  height: auto;
  vertical-align: middle;
  font-size: 0;
}
#header-txt {
  display: inline-block;
  font-size: initial;
  *zoom: 1;
  *display: inline;
  vertical-align: middle;
  line-height: 1;
}
.h1-header-txt {
  margin: 0 0 0;
}
#header-img {
  display: inline-block;
  *zoom: 1;
  *display: inline;
  vertical-align: middle;
  padding-right: 15px;
}

.active {
  zoom: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="header-wrapper">
  <div id="header-img"><img src="//cdn.shopify.com/s/files/1/2215/1909/files/icon-alivehm_4fbccdb6-8ec5-4aaa-b6af-e6915d2c0315_large.png" /></div>
  <div id="header-txt">
    <h1 class="h1-header-txt">HEADER THAT CHANGES SIZE</h1>
  </div>
</div>

如何在div达到窗口宽度

1 个答案: