响应式 html，具有固定的纵横比和屏幕填充答案

【问题标题】：Responsive html, with fixed aspect ratio and screen fill响应式 html，具有固定的纵横比和屏幕填充
【发布时间】：2016-02-05 03:29:10
【问题描述】：

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

想要的行为是页面将填满浏览器窗口，而不被任何方向裁剪，同时保持想要的比例。

谢谢！

我的 HTML sn-p:

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

我的 CSS sn-p:

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;
}

【问题讨论】：

根据定义，您的网页具有固定的纵横比不是responsive web design。
唉，那是客户的需求。固定设计的纵横比，同时在分辨率之间移动时保持响应性和缩放...
你有没有试过给你的元素#content和#menuBar一个max-width？或者您可以使用css media queries，这样当屏幕尺寸为一定宽度时，您可以为元素提供稳定的尺寸（宽度和/或高度）。

标签： html css

【解决方案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 函数

【讨论】：

谢谢，但底部仍然被裁剪...正在寻找一种方法来防止它被裁剪...
我不确定你的意思。在我的笔记本电脑上，innerContent div 是 1333 x 833 像素 - 16/10 的比例。
@JamieC 据我了解，他希望内容具有相同的纵横比，但限制高度和宽度，使其适合当前浏览器窗口大小。
啊，是的，来自原始问题“想要的行为是页面将填满浏览器窗口，而不是在任何方向被裁剪，同时保持想要的比例。”。这是不可能的，因为浏览器窗口是由用户设置的。例如你在不是 16/10 比例的显示器上查看全屏是什么？您可以使用 javacript 重新调整浏览器窗口的大小，但这是一种非常突兀的做法，谢天谢地，十多年前它已经过时了。它也不适用于只有全屏 Bowser 视图的移动设备。
无需移动支持。想要的行为是更改边距大小，以免页面裁剪...

【解决方案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

【讨论】：

谢谢，看起来不错，但仍然不符合要求...我不想更改窗口大小，只是边距值...包装器应该在窗口中居中，并且不应该长到可以被种植。
不确定您的意思 - 包装容器永远不会设置为比窗口的内容区域更宽或更高。如果要居中对齐，只需将margin: 0 auto 添加到包装器中即可。
当然，你是对的。我的意思是正文背景将围绕中心内容区域并填充屏幕。浏览器应该在每个分辨率下都是全屏的。
但是您无法控制用户的浏览器是否全屏，或者他们的纵横比。就个人而言，我认为您正在尝试解决一个不值得解决的问题。您将投入大量精力来制作对大多数人来说用户体验不佳的东西。如果你真的想要，你将需要使用一些 javascript 来检测可视内容区域的尺寸并根据它进行调整，你应该能够通过调整上述内容来做到这一点。
如果您不希望它是流动的（即当用户调整窗口大小时发生变化），请删除window.onresize = setRatio;。

【解决方案3】：

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

【讨论】：