Question

我遇到了制作响应式画布元素的问题。我使用带有360ui的soundmanager2.js插件，并渲染一个画布元素来显示声波/频谱 - 我将用于场景。

首先。在soundmanager.js下面使用css渲染一个巨大的画布。宽度=“3840”

.player-warp {
position: relative;
width: 100%;
height: 100%; }

.ui360 .sm2-canvas.hi-dpi {
position: absolute;
left: -50%;
top: -50%;}

二。使用下面的css，soundmanager.js通常渲染画布。但没有回应。

.player-warp {
position: relative;
width: 225px;
height: 225px; }

.ui360 .sm2-canvas.hi-dpi {
position: absolute;
left: -50%;
top: -50%;}

如何调整大小/使其响应？

Answer 1

首先：试试你能不能展示一下你的目标是什么（你想让页面看起来像什么）

如果我对你的目标的看法是正确的，你可以使用以下样式代码：

        * {
            padding: 0px;
            border: 0px;
            margin: 0px;
        }
        html {
            width: 100vw;
            height: 100vh;
        }
        body {
            width: 100vw;
            background-color: rgb(19, 19, 19);
        }
        div#mainContainer {
            margin: calc((100vh - ((6/7) * 100vw)) / 2) 0px;
            width: 100vw;
            height: calc((6/7) * 100vw);
            background-color: rgb(180, 180, 180);
            z-index: 1;
        }
        iframe {
            width: 100%;
            height: 100%;
        }
        @media only screen and (min-aspect-ratio: 7/6) {
            div#mainContainer {
                margin: 0px calc((100vw - ((7/6) * 100vh)) / 2);
                width: calc((7/6) * 100vh);
                height: 100vh;
            }
        }

<body>
<div id="mainContainer">
    <iframe></iframe>
</div>

</body>

只需将 iframe 更改为画布并进行相应编辑

响应式帆布元素？

1 个答案: