Question

我正在尝试创建一个响应式网页，固定比率为16x10。到目前为止，下面的代码工作。我目前唯一的问题是，当宽度变得太大时，页面需要滚动。

想要的行为是页面将填充浏览器窗口，而不会在任何方向上被裁剪，同时保持通缉率。

谢谢！

我的HTML代码段：

 <div id="wrapper">
    <div id="innerContent">
        <div id="header">...</div>
        <div id="menuBar">...</div>
        <div id="content">...</div>
    </div>
</div>

我的CSS片段：

body {
    margin: auto;
    box-sizing:border-box;
}
#wrapper{
    margin: 0 auto;
    padding: 5vw;
    text-align: center;
}
#innerContent{
    padding: 2vw;
}
#header {
    position: relative;   
    height: 7vw;
}
#menuBar {
    width: 100%;
    height: 5vw;
}

#content {
    height: 36vw;
    width: 100%;
    position: relative;
}

Answer 1

这听起来像是一个糟糕的设计，所以我试图说服客户以不同的方式做到这一点。

如果失败，您可能会使用类似的技术来获得固定比例的图像和视频。您将高度设置为0并添加等效于％的填充。填充计算为宽度的％。

#wrapper {
  height: 0;
  padding-bottom: percentage(10/16);
  background: rgba(0,0,0,0.2);
  position: relative;
  z-index: 0;
}

#innerContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  z-index: 1;
}

http://codepen.io/jaycrisp/pen/obPgYe

注意：此计算使用sass函数

Answer 2

仅使用CSS是不可能的，你必须使用一些javascript。

首先，我们需要获取窗口的宽度和高度，然后计算出比率：

var height = window.innerHeight;
var width = window.innerWidth;
var ratio = height / width;

根据窗口比例是大于还是小于10/16，我们需要以不同的方式处理计算：

var wrapperHeight, wrapperWidth;
if (ratio >= 10/16) {
  wrapperWidth = width;
  wrapperHeight = width / 1.6; 
} else {
  wrapperHeight = height;
  wrapperWidth = height * 1.6;
}
wrapper.style.height = wrapperHeight + 'px';
wrapper.style.width = wrapperWidth + 'px';

然后我们需要在页面加载和窗口调整大小时进行此计算。

window.onload = setRatio;
window.onresize = setRatio;

http://codepen.io/jaycrisp/pen/obPgYe

Answer 3

最后，找到了我自己的解决方案。使用媒体查询为包装器定义固定分辨率，并使用javascript定义使用百分比计算的固定高度，以便能够使用子元素的百分比宽度。

响应式HTML，具有固定的宽高比和屏幕填充

3 个答案: