Css更改宽高比

Question

好的，所以我建立一个百分比为16/9的宽高比的网站。如果我缩放网站并且我的网站上的宽高比发生变化，所有元素都会向不同的方向飞行。这是因为t keep the same aspect ratio as in which i build it. There is the max and min width in css. But these don的高度和宽度完全帮助我解决了我的问题。我知道我搞砸了，但有没有办法确定纵横比并使我的百分比对不同的比率做出反应？

如果没有，有任何提示让我的网站在任何屏幕上看起来很酷吗？顺便说一下，你可以在www.joeptenhaaf.nl找到我的网站

请帮帮我:)。

的Joep

Answer 1

您可以使用答案here (maintain aspect ratio of a div)

将所有内容放入包装器div中，其纵横比保持不变

或者，或者结合使用，您可以使用CSS媒体查询来不同地显示网站以响应不同的显示尺寸（宽度，高度或两者）。这一切都在CSS中。一种方法是首先为较小的屏幕构建网站的布局CSS，然后在每个较大的大小值处添加包含相同元素的修改的CSS值的媒体查询，例如。调整手机，平板电脑和计算机大小设备的标题文字大小：

header {
font-size: 14px; }

@media only screen and (min-width: 481px) { 
header {
font-size: 20px; }
}
@media only screen and (min-width: 800px) { 
header {
font-size: 40px; }
}

您还可以开始为更大的屏幕制作网站，然后进行媒体查询，如：

@media only screen and（max-width：799px）{

}

你也可以让它对身高做出反应。

希望这有帮助！

编辑：我想我可能误解了你的问题。您也可以通过媒体查询来响应宽高比，因此this would be your solution!