根据浏览器大小使用css调整元素

Question

所以我有这样的html页面：

我想做到这一点，当我调整浏览器大小或在不同分辨率的机器上使用它时，图像和按钮会相应调整。我猜他们的宽度应该与浏览器大小有某种关系。

而且我还希望按钮保留在上面列出的oder中，而不是当我调整大小时它们会在彼此之下（

目前发生以下情况：

正如您可能会注意到地图部分调整得很好，但我无法弄清楚为什么按钮不会。

这是我的index.html文件部分：

<div class=wrapper">
    <div class="toolbar">
        <a href="" onclick="touch('football')"><img alt="Football"
            src="images/iconsB/football.png" class="toolbarButton" /></a> <a
            href="" onclick="touch('basketball')"><img alt="Basketball"
            src="images/iconsB/basketball.png" class="toolbarButton" /></a> 
            ###and so on until the end of icons###
    </div>
    <div class="loginbar">
        <div>
            <a href="#logged-in-box" class="loggedin_button"
                onclick="touch('addingplaces')">Add places</a>
        </div>
        <div id="loggedinbutton">
            <a href="#login-box" class="login-window"
                onclick="showLoginForm('a.login-window')">Log in</a>
        </div>
    </div>

这是我的css http://pastebin.com/0DGMfnmh

任何想法从哪里开始？提前谢谢！

Answer 1

您正在寻找 CSS Media Queries 。使用媒体查询，您只能为特定分辨率声明CSS规则。

如果为每个图像指定一个类，则可以通过媒体查询设置图像的宽度。这是一个简单的例子：

HTML：

<img src='#' class='icon'>
<img src='#' class='icon'>
<img src='#' class='icon'>

CSS：

/* Default rule */
.icon {
    width: 64px;
    height: auto;
}

/* Rules for horizontal screen resolution <= 800px */
@media (max-width: 800px) {
    .icon {
        width: 48px;
    }
}

/* Rules for horizontal screen resolution <= 600px */
@media (max-width: 600px) {
    .icon {
        width: 32px;
    }
}

Answer 2

看一下这个link它会告诉你一些基本的你可以用媒体查询做什么，如果你想让它们换行，那么我会遵循@Michal的建议