Question

我有一个看起来可以100％浏览器分辨率的组件...

一些用户要求将其显示为更大，而另一些用户则要求将其显示为较小。当然，可以通过ctr +“ +” / ctrl +“-”来实现，但是我认为应该实现一个滑块，使用户可以在其认为合适的情况下在50％到150％之间滑动以更改组件的大小。 / p>

一个沙箱，用于说明组件的外观和构建方式： https://codesandbox.io/s/fragrant-morning-267l5

Answer 1

我认为您可以通过按一定比例调整大小来完成

我认为您可以实现滑块或在滑块的任何一端进行激活的东西，它会在CSS中激活一个类，并且可以使用该类的width:x%，其中x是您想要的数量任何元素

Answer 2

var sliderthing = document.getElementById("component");
var outputthing = document.getElementById("out");

sliderthing.oninput = function() {
  outputthing.style.width = this.value;
  outputthing.style.height = this.value;
}

这是您想要的吗？

或者，也许，如果您想对其进行倍增以获得缩放效果（将其放在网站的每个组件上）：

var sliderthing = document.getElementById("component");
var outputthing = document.getElementById("out");

sliderthing.oninput = function() {
  outputthing.style.width = outputthing.style.width * this.value;
  outputthing.style.height = outputthing.style.height * this.value;
}

Answer 3

您可以为此使用缩放。将模块封装在div中以保持边界。

请谨慎使用，因为它不能在每个浏览器中都起作用（thx @ G-Cyr）

var $range = $('#myRangeSlider');
var $module = $('#myModule');
$range.on('input', function() {
  $module.css('zoom', $(this).val() + '%');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col col-6">
      <input type="range" min="50" max="150" value="100" class="slider" id="myRangeSlider"/>
    </div>
    <div class="col col-6">
      <div id='myModule'>
      <form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>

相对比例方法（“运行代码段”>“整页”以查看效果）：

.module {
  font-size: 5vw;
}

input[type=checkbox] {
  height: 5vw;
  width: 5vw;
}

input {
  height: 5vw;
  font-size: 5vw;
}

<div class='module'>
  I Scale relative to the Viewport
  <br/>
  <label>
    <input type="checkbox" / >
    Check me
  </label><br />
  <input type="text" placeholder="bla..." />
</div>

另一种方法是引入css断点并设置所需的字体大小等：https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/

是否可以在内部使用其所有控制器来更改整个组件的大小（例如调整窗口大小）

3 个答案: