Question

以下代码附于window.onresize = resize;。 baseWidth和baseHeight会在加载时读取，作为计算的基础。仅通过将main变量设置为主html节点来定义em变量。字体在块元素上设置，以使其中的所有基于calc的元素按类型调整大小。更改浏览器的宽度或高度后，将重新计算比率。请参阅演示以了解我使用JS实现的目标，但希望找到一个纯CSS解决方案：http://codepen.io/anon/pen/nLauF

我一直在探索CSS3中的选项，例如function resize() { var height = 0, width = 0; if(window.innerWidth <= window.innerHeight) { size = window.innerWidth / baseWidth; height = baseHeight * size; width = window.innerWidth; } else { size = window.innerHeight / baseHeight; height = window.innerHeight; width = baseWidth * size; } if(baseWidth * size > window.innerWidth) { size = window.innerWidth / baseWidth; height = baseHeight * size; width = window.innerWidth; } main.style.height = height + "px"; main.style.width = width + "px"; main.style.fontSize = size * 16 + "px"; }。随意也建议对JS的任何改进。

{{1}}

谢谢！

Answer 1

我用vmin units编写了这段代码，包括字体大小计算：

<强> DEMO

CSS：

main {
    width: 80vmin;
    height: 60vmin;
    background-color: #000;
    position: absolute;
    top:0; bottom:0;
    left:0; right:0;
    margin:auto;
}
h1 {
    color: #fff;
    font-size: 30px; /* general fallback */
    font-size: 5vm; /* IE9 fallback */
    font-size: 5vmin;
}

对于浏览器支持，您可以查看canIuse

Answer 2

我改编了一篇我为不同项目编写的CSS来解决你的问题：JSFiddle DEMO 我通过使用.75乘数实现了4-3的纵横比（即主要宽度为50％，高度应为75％，因此填充顶部为37.5％）。你可以看到它们如何调整以锁定你的比例。

.main {
  width: 50% !important;
  height: 0;
  display: block;
  overflow: hidden;
  line-height: 0;
  position: relative;
  padding: 37.5% 0 0 0;
  background-color: #000;
  margin: 0 auto;
}
.main-inner {
  position: absolute;
  display: block;
  margin: auto;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
}
.main-inner-relative {
    position: relative;
    padding: 10px;
}
p { 
  color: white; 
  padding: 0;
  margin: 0;
}

这需要您修改HTML，如下所示：

<div class="main">
    <div class="main-inner">
        <div class="main-inner-relative">
            <p>hello</p>
        </div>
    </div>
</div>

reference 1 - 此引用是我原来的解决方案，用于保持图像锁定为宽高比

reference 2

根据浏览器的高度和宽度保持宽高比和字体大小？

2 个答案: