这对我来说是一个大问题，我正在努力解决不同设备之间的缩放问题。如果我只有一个回显的乘数，那就太好了，除非可以使用 javascript 变量来代替宽度、高度、字体大小等值...
例如，stackexchange 的横幅可能使用绝对位置在屏幕上 100% 移动，但如果您使用 div，宽度为 100% 并向左浮动，则元素的两端会有一些空间。
因此，当我看到这些为移动设备制作的页面时，它们被使用大字体的部分分隔开，并且它们似乎可以响应缩放。
如何实现没有绝对宽度/高度值的绝对位置效果？
我在页面加载之前使用 PHP 来回显修改后的变量。
例如
<?php
// get device screen height width via ajax post
$width = $POST['value'];
$height = $POST['value'];
if(($width/$height)>1) {
$multiplier = 10;
}else {
$multiplier = 1;
}
// process values on page
$variable_height = $multiplier*30;
$px = "px";
$concat_height = $variable_height.$px;
$new_height = $concat_height;
?>
<!DOCTYPE HTML>
<head>
<style>
.full-span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: <?php echo $new_height; ?>;
}
</style>
</head>
<body>
<div class="full-span">My height changes on device height</div>
</body>
示例相当困惑，但我想您已经明白了。
最佳答案
在缩放方面，您可以尝试...
HTML
<div class="full-span">
<h1>Content</h1>
</div>
CSS
.full-span
{
background: url(..img/whatever.png);
background-size: contain;
height: 10%; /* or whatever */
max-height: 200px; /* or whatever */
}
关于javascript - 如何在不使用绝对位置的情况下 100% 跨越 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33263796/