Question

我有一个带分页器的幻灯片，幻灯片分页器旁边的一些按钮（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>

如果可能，我找到media queries以外的解决方案。我尝试通过将容器div放到上面的结构并给它100％的宽度和高度，通过$（width）.width（）函数给所有div赋予宽度％。但没有得到解决方案。

jsfiddle

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

Answer 1

您可以使用@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>

这会将身体的背景颜色更改为浅蓝色。但是当您将浏览器窗口调整为小于300px时，它将更改为lightgreen。我希望这可以帮助你解决问题。

Answer 2

是的，请使用vw和vh CSS属性。

1vw =窗口宽度的1％， 1vh =窗口高度的1％。

http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design

Answer 3

这是使用CSS和HTML的简单解决方案，没有@media查询没有JavaScript，我刚刚在下面的代码中修改了一些HTML和CSS行。

<强> HTML

ElementTree

<强> CSS

<div id="controls-wrapper" >
            <div id="controls">
            <div id="cycle-nav"><ul></ul></div>
            </div>
            <div class="buton-controls">
                <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>
        </div>

根据浏览器的宽度重新调整div的宽度

3 个答案: