gpt4 book ai didi

javascript - 根据浏览器的宽度调整 div 的宽度

转载 作者:太空宇宙 更新时间:2023-11-03 23:17:31 24 4
gpt4 key购买 nike

我有一个带寻呼机的幻灯片和幻灯片寻呼机旁边的一些按钮(here 是 html 页面),我试图使其响应。

我从数据库中获取的图像。所以这在数量上是不同的。

问题是幻灯片的寻呼机/导航对于较少数量的图像没有问题,但对于更多图像就会出现问题。寻呼机与旁边的按钮重叠。如下图:

对于桌面屏幕: enter image description here

对于小屏幕:enter image description here

下面是div结构

<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div> <!-- pager -->
</div>
<div class="button1" id="button1">
<a href="#">button 1</a>
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3"><a href="#" target="_blank">button 3</a></div>
</div>

如果可能的话,我正在寻找媒体查询以外的解决方案。我尝试通过 $(width).width() 函数将容器 div 放在上面的结构中,并给它 100% 的宽度和高度,给所有 div 以 % 为单位的宽度。但没有得到解决方案。

jsfiddle

有没有办法根据浏览器的屏幕尺寸动态调整div的宽度?

最佳答案

您可以使用@media 查询。这是一个例子:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

@media screen and (max-width: 300px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
...
</body>
</html>

这会将主体的背景颜色更改为浅蓝色。但是,当您将浏览器窗口的大小调整为小于 300 像素时,它将变为浅绿色。我希望这能帮助您解决问题。

关于javascript - 根据浏览器的宽度调整 div 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29893629/

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