Question

我是编码的新手，我遇到了调整大小问题。

我的标题是顶部有两个按钮的图像（将是菜单）。我想构建一个响应式模板。但是当我调整窗口大小时，两个按钮并不完全跟随图像并保持在图像下方。

我该如何解决？

<!DOCTYPE html>

<head>

    <meta charset="utf-8" />

    <title>My Website</title>

    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/flowtype.js"></script>

    <style type="text/css">

    body {
        overflow-x: hidden;
    }

    .image-banners {
        position: absolute;
        z-index: -1;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
        top: 0em;
        left: 0em;
    }
    .banner-title {
        position: relative;
        font-family: 'Segoe UI', sans-serif;
        font-size: 2em;
        text-shadow: 0.05em 0.05em black;
        color: rgba(255, 255, 255, 1);
        top: -0.5em;
        left: 2em
    }
    nav {
        position: fixed;
        margin-top: 2.5em;
        margin-left: 23em;
        font-family: 'Segoe UI', sans-serif;
        font-size: 0.5em;
        line-height: 2.6em;
    }
    .link-nav {
        text-decoration: none;
        color: rgba(215,215,215,1);
    }
    .menu-button-left {
        background: rgba(143,3,6,1);
            background: -webkit-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
            background: -moz-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
        width: 15em;
        height: 2.5em;
        text-align: center;
        float: left;
        border-radius: 0.3em 0 0 0.3em;
        border-right: 0.1em solid;
        border-color: rgba(106,2,4,1);
    }
    .menu-button-left:hover {
        background: rgba(106,2,4,1);
            background: -webkit-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
            background: -moz-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
    }
    .menu-button-right {
        background: rgba(143,3,6,1);
            background: -webkit-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
            background: -moz-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
        width: 15em;
        height: 2.5em;
        text-align: center;
        float: left;
        border-radius: 0 0.3em 0.3em 0;
    }
    .menu-button-right:hover {
        background: rgba(106,2,4,1);
            background: -webkit-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
            background: -moz-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
    }
    </style>
</head>

<body>
    <header>
        <img class="image-banners" src="images/Banner.png" />
        <h1 class="banner-title body">MY WEBSITE</h1>
        <nav>
            <a class="link-nav body" href="#1"><div class="menu-button-left"><b>BUTTON 1</b></div></a>
            <a class="link-nav body" href="#2"><div class="menu-button-right"><b>BUTTON 2</b></div></a>
        </nav>
    </header>

<script type="text/javascript">
    $('body').flowtype({
 minimum   : 400,
 maximum   : 1000,
 minFont   : 5,
 maxFont   : 40,
 fontRatio : 30
});
</script>

</body>

谢谢你

Answer 1

首先，在这些情况下，通常会创建jsfiddle链接或类似的内容来演示您的问题。在这种情况下，您可以找到一个here。

现在要添加对按钮的响应，您需要使用media queries。（这通常适用于响应式设计）请查看如何使用媒体查询here，我想您已准备好解决它。

响应部门调整大小

1 个答案: