gpt4 book ai didi

javascript - 如何在不使用绝对位置的情况下 100% 跨越 div?

转载 作者:行者123 更新时间:2023-11-28 06:47:36 28 4
gpt4 key购买 nike

这对我来说是一个大问题,我正在努力解决不同设备之间的缩放问题。如果我只有一个回显的乘数,那就太好了,除非可以使用 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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com