Css 更改纵横比的百分比

Question

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

如果没有，是否有任何提示可以让我的网站在任何屏幕尺寸上看起来都很酷？顺便说一句，您可以在以下位置找到我的网站：www.joeptenhaaf.nl

请帮帮我:)

乔普

Answer 1

您可以将所有内容放入包装器 div 中，其纵横比使用答案 here (maintain aspect ratio of a div)

保持不变

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

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!

Css 更改纵横比的百分比

Css change percentages on aspect ratio

css

aspect-ratio