Question

我有一个复杂的电路板，由绝对大小和定位的DIV组成。我希望在没有剪裁的情况下，在任何屏幕尺寸上以尽可能大的正确宽高比显示生成的布局。我确信我可以在没有JS的情况下做到这一点，但我还没弄明白。

在研究中，我找到了@viewport属性，看起来这个，加上使用PXs完成的布局，会给我我想要的东西。当然，假设我可以找到一个设置适当尺寸的@viewport设置。我想这将基于@media查询，对于16：9目标宽高比可能是这样的：

@viewport {
    width: device-width;
    height: calc(9 * device-width / 16);
}
@media (orientation: landscape) {
    @viewport {
        width: calc(16 * device-height / 9);
        height: device-height;
    }
}

然而，此功能似乎是hasn't been ratified yet，我无法让@viewport + PX在Chrome（42.0.2311.135 m）中完全影响屏幕。另外，在文档的第5小节中，无论如何，看起来VH，VW等描述符将基于初始而非实际/修改的视口（但我不确定它是如何有用的。）

百分比不起作用，因为它们与相关尺寸相关（左/宽度相对于水平尺寸，顶部/高度相对于垂直），因此不保持纵横比。

绝对尺寸（in，cm等）不允许我在每个屏幕上最大化尺寸。

我最接近的是使用较新的大众单位进行布局，保持纵横比，并随屏幕缩放。不幸的是，当窗口变得宽于我用作目标的任何宽高比时（例如，当浏览器顶部有书签或其他工具栏时），电路板会被剪裁。（据推测，对于极高的人像屏幕，VH会出现同样的问题。）

<style>
.row1 {
    top: 2vw;
    height: 19vw;
    border-top-width: 1vw;
}
.col1 {
    left: 2vw;
    width: 19vw;
    border-left-width: 1vw;
}
</style>
<div class='col1 row1' id='box1'></div>

我还没有完成复杂的电路板布局，因此我创建了this simple example来使用。（目标布局具有拼凑在一起的不同大小的框。）如果您在JSFIDDLE周围调整浏览器窗口大小，使其变得比高大得多，您将看到裁剪。

有没有办法在没有JS的情况下完成所有这些事情（最大化电路板尺寸，保持宽高比，避免削波）？（如果需要JS，我是否必须根据视口大小修改DOM中的每个偏移量和维度才能执行此操作？）

编辑：我也看到了 object-fit：contains 属性，但这似乎只适用于＆lt; video＆gt;，＆lt; object＆gt;，＆lt; img＆gt ;，＆lt; input type = image＆gt;，＆lt; svg＆gt;，＆lt; svg：image＆gt;和＆lt; svg：video＆gt;。如果它适用于其他元素，这对于这种情况似乎也是一个很好的解决方案。

编辑2 ：似乎这可以通过内联SVG实现： jsfiddle.net/nLdrwa73 （需要更多信誉点才能发布超过2个链接）。但是，当您不能使用CSS来使用常用选择器（上面使用的类或id前缀）来对齐事物时，创建复杂的布局会更加痛苦，而是必须在HTML中为每个选项明确提供位置和维度。元件。（我发现Chrome实际上在CSS中考虑了x和y，但没有考虑宽度和高度，但IE 11忽略了两者。）还有其他想法吗？

最大化布局，无论屏幕尺寸如何都保持宽高而不剪裁？

0 个答案: