我希望文档中的每个元素都能根据屏幕大小和屏幕大小按比例调整大小。。
请看这个电笔。
这是代码笔的文章。
在Codepen中，您可以看到内容就在灰色容器的中心，如果您调整灰色容器的大小，则内容会按比例调整的大小，并且仍在灰色容器中心？
现在，我希望我的整个文档表现得像灰色容器。唯一的区别是，当屏幕调整大小时，我希望内容调整大小，而不是当用户抓取并调整灰色容器时。这有道理吗？
所以我创建了这个容器scale-container，我会把每个元素都放进去：
const $el = $("#scale-container");
const elHeight = $el.outerHeight();
const elWidth = $el.outerWidth();
window.addEventListener('resize', () => {
doResize();
});
function doResize(event, ui) {
let scale, origin;
scale = Math.min(getViewPortWidth() / elWidth, getViewPortHeight() / elHeight);
console.log(scale)
$el.css({ transform: `translate(-50%, -50%) scale(${scale})` });
function getViewPortWidth() {
return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
}
function getViewPortHeight() {
return Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
}
}
doResize();body {
background: #ccc;
overflow: hidden;
margin: 0;
}
.scale-container {
/*fill whole screen if it's 1920*1080 */
width: 1536px;
height: 864px;
text-align: center;
background: white;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: center center;
}
.ui-resizable-se {
width: 10px;
height: 10px;
background: orange;
position: absolute;
bottom: 0;
right: 0;
}
.bigred {
color: red;
font-size: 5rem;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="scale-container" id="scale-container">
<h1>I am designed just so.</h1>
<p>My design is intentional. I want to be scaled in such a way that scales the design. No reflows or anything, just straight up scaling. Kinda like SVG.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skull-and-crossbones.svg" alt="" />
<p class="bigred"> ✖ ✖ ✖ </p>
</div>
<script SRC="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" TYPE="text/javascript"></script>
<script SRC="script.js" TYPE="text/javascript"></script>
</body>
</html>问题很明显，我希望scale-container在可能的情况下(当纵横比不变时(填充整个屏幕，并且我希望它位于屏幕的中心。。。
我该怎么解决这个问题？
尝试使用这个。中/iframe.html，只要使用视口单位就可以了。
* {
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;
}
}<html>
<head>
<title></title>
</head>
<body>
<div id="mainContainer">
<iframe src="./iframe.html"></iframe>
</div>
</body></html>