Question

我有一个完整的html项目（html / css / js）设置绝对大小。因此，如果增加浏览器窗口大小，则主体保持相同的大小并且不会更改。当我增加浏览器窗口时，是否有一种简单的方法可以使用宽高比增加每个DOM？所以当我放大图片时它应该有点像。我找到的所有解决方案主要用于html代码中的单个元素。

Answer 1

听起来你需要更改大小的初始定义（即使用百分比的样式），或者可以使用几个js函数来引用window.innerHeight和window.innerWidth属性。我会使用这样的结构，如果它不太麻烦（你可以使用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

理论上，是的，您可以根据您设计的绝对尺寸观看窗口调整大小并将页面内容缩放到某个比例。

// 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>

在实践中，正如您可以看到通过将上面的示例弹出到全屏然后调整窗口大小，这会产生非常令人不满意的结果：所有尺度都包括字体大小和图像，这将使移动屏幕上的内容变得难以置信并且难以读取在更大的屏幕上。

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

使用绝对大小调整html项目的大小

2 个答案: