调整 html 项目的绝对大小

Question

我有一个完整的 html 项目 (html/css/js) 设置了绝对大小。因此，如果增加浏览器 window 大小，正文将保持相同大小并且不会改变。当我增加浏览器 window 时，有没有一种简单的方法可以增加每个 DOM 的纵横比？所以它应该有点像我放大图片时的行为。我找到的所有解决方案主要针对 html 代码中的单个元素。

Answer 1

听起来您要么需要更改尺寸的初始定义（即使用百分比的样式），要么可以使用一些引用 window.innerHeight 和 [=14= 的 js 函数] 特性。如果不太麻烦的话，我会使用这样的结构（你可以使用 Jquery）：

<style>

#percentage_div{
        width:50%;
        height:50%;
        background-color:red;
}
</style>
<div id="surrounding_div">
    <div id="percentage_div"></div>
</div>

<script>

$("#surrounding_div").css("height",window.innerHeight);
$("#surrounding_div").css("width",window.innerWidth);


$(window).on('resize', function(){ // if the user resizes
    $("#surrounding_div").css("height",window.innerHeight);
    $("#surrounding_div").css("width",window.innerWidth);

});
</script>

Answer 2

理论上，是的，您可以观看 window 根据您设计的绝对大小调整页面内容的大小和比例。

// jQuery used for convenience, but this could be done in vanilla as well
var scalehack = function() {
  var abswidth = 500; // width of the absolutely-positioned layout
  var scale = window.innerWidth / abswidth; // amount to transform to fit the window
  $('#container').css("transform", "scale(" + scale + ")");
};

$(window).on("resize", scalehack);
scalehack();

body {
  margin: 0
}

#container {
  transform-origin: 0 0
}

div.box {
  border:1px solid;
  width: 500px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="box">
  This is text.
  <img src="http://placehold.it/100x100">
  <h1>Lorem Ipsum</h1>
  This is more text. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

实际上，正如您将上面的示例弹出到全屏然后调整 window 大小所看到的那样，这会产生非常不令人满意的结果：包括字体大小和图像在内的所有内容都会缩放，这将使内容变得小得难以阅读在移动屏幕上，在大屏幕上大得难以阅读。

我知道您正试图找到一种方法来避免以您最初应该使用的相对单位重做所有 CSS，但是：老实说，您应该重做所有 CSS 在你应该首先使用的相对单位中。

调整 html 项目的绝对大小

resize html project with absolute sizes

html

javascript

css

scale

zooming