说明

Question

我正在处理Vue项目，我让用户通过单击每个设备特定的图标（移动设备，平板电脑，笔记本电脑和台式机）来选择应用程序主容器的宽度和高度。类似于Firefox响应工具。如何强制主容器内的元素响应其自身的视口而不是浏览器视口？
我正在使用UIKit宽度组件来定义断点。我知道我可以通过动态添加/删除类来实现这一点，但是我的Vue组件是由用户动态添加的，因此更加复杂。
我认为可能会有更通用的方法来做到这一点。这是示例代码（不同视口中可见幻灯片的数量变化，并且如果我的组件是网格元素，则其中的项目应该包装（基于容器的宽度））：

<div id="main-container" :style="{width: deviceWidth, height: deviceHeight}">

  <!-- Dynamically added component -->
  <div class="uk-position-relative uk-visible-toggle uk-light" uk-slider>
  
    
    <!-- UIKit Width classes -->
    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
      <li>
        <img src="../../img/01.jpg" alt="">
        <div class="uk-position-center uk-panel"><h1>1</h1></div>
      </li>
      <li>
        <img src="../../img/02.jpg" alt="">
        <div class="uk-position-center uk-panel"><h1>2</h1></div>
      </li>
      <li>
        <img src="../../img/03.jpg" alt="">
        <div class="uk-position-center uk-panel"><h1>3</h1></div>
      </li>
      <li>
        <img src="../../img/04.jpg" alt="">
        <div class="uk-position-center uk-panel"><h1>4</h1></div>
      </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>

  </div>
</div>

Answer 1

说明

这是一个非常简单且最小的答案，其字面意思是为了说明如何解决问题而编写的，但是正如您在此答案中所看到的那样，按下不同的按钮会使包含元素增加/缩小。

正如您在此解决方案中看到的那样，所有响应元素将根据父元素的大小进行响应。如果您使用固定尺寸（例如在我的示例中），确实很容易实现。

尽管要注意，我只选择使用非常小的实现，不使用Vue或任何复杂的东西，这是一个简单的解决方案，仅使用本机技术。

编辑

确切地了解了您要查找的内容之后，总而言之，就是没有一种干净便捷的方法可以做到这一点，至少就我所知，您最好的选择就是简单地更改和更改类，以使到目前为止最有意义。

由于您的问题有点含糊，对我来说，您似乎正在尝试执行类似于@arieljuod所说的逻辑，在此过程中，您尝试在特定DOM元素而非用户的视口上运行媒体查询。

很抱歉通知您，据我所知，没有干净简便的方法可以实现这一目标，不是说没有办法，我敢肯定有人找到了办法，但是干净，简洁，易于阅读的解决方案，我高度怀疑是否存在这样的解决方案。

const clickHandler = txt => {
  let clName = '';

  switch (txt) {
    case 'Desktop':
      clName = 'desktop';
      break;
    case 'Tablet':
      clName = 'tablet';
      break;
    case 'Mobile':
      clName = 'mobile';
      break;
    default:
      clName = 'desktop';
  }

  document.getElementById("app").className = clName;
};

document.querySelectorAll("#sizes button").forEach(btn => {
  btn.onclick = () => clickHandler(btn.textContent);
});

#sizes {
  width: 100%;
  display: block;
  overflow: auto;
}

#sizes button {
  float: left;
  margin: 15px;
  padding: 15px;
  border: 1px solid black;
  background: white;
  box-sizing: border-box;
  width: calc(33.33% - 30px);
}

#app {
  height: 100vh;
  background: #eee;
}

#app.desktop {
  width: 960px;
}

#app.tablet {
  width: 700px;
}

#app.mobile {
  width: 320px;
}

.col-2 {
  display: block;
  overflow: auto;
}

.col-2>* {
  float: left;
  width: calc(50% - 30px);
  padding: 15px;
  margin: 15px;
  box-sizing: border-box;
  border: 1px solid black;
}


/* Just for a demo */

#redBlock {
  background: red;
  height: 100px;
  width: 75%;
}

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>

<div id="sizes">
  <button>Desktop</button>
  <button>Tablet</button>
  <button>Mobile</button>
</div>

<div id="app" class="desktop">
  <div class="col-2">
    <p>Hello</p>
    <p>World!</p>
  </div>

  <div id="redBlock"></div>

  <div uk-slider>
    <div class="uk-position-relative uk-visible-toggle uk-light">
      <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
        <li>
          <img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>1</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>2</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>3</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>4</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>5</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>6</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>7</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>8</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>9</h1>
          </div>
        </li>
        <li>
          <img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
          <div class="uk-position-center uk-panel">
            <h1>10</h1>
          </div>
        </li>
      </ul>

      <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
      <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>

    </div>

    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
  </div>
</div>

可能的解决方案

如上所述，在这种情况下，我要做的就是改变滑块上的类，这意味着您可以使用附加/附加逻辑来检查用户的宽度，但这可能是 可能是最简单的方法。

如何使html元素响应其父视口而不是浏览器视口？

1 个答案:

说明

编辑

可能的解决方案