Question

如果我将浏览器的窗口缩小，则按钮会混合，徽标会稍微下降。我希望按钮和徽标仍然在那里。我怎么能意识到这一点？提前谢谢！

html：

<!DOCTYPE html>
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css"/>
    </head>
<html>
    <body>
            <div id="header">
                <table>
                        <th>
                            <img id="logo" src="images/logo.jpg">
                        </th>
                        <th>
                            <div id="menue_bar">
                                <a href="#">Home</a>
                                <a href="#">News</a>
                                <a href="#">Contact</a>
                            </div>
                        </th>
                </table>
            </div>
    </body>
</html>

和css：

#menue_bar {
    padding: 24px;
    border: #999 1px dashed;
    margin-left: 20px;
}
#menue_bar > a{
    font-size:17px;
    padding: 12px 24px; 
    margin-right: 10px;
    text-decoration: none;
    border-style: solid;
    border-radius: 3px;
    transition: background 0.3s linear 0s, color 0.3s linear 0s;    
}
#header {
    background-color: #FFFF;
    height: 80px;
}

Answer 1

您需要一个响应式设计。有很多方法可以做到这一点，一些简单的规则是：

避免固定尺寸（px）并开始使用缩放（em，％等）
使用CSS媒体查询

推理：

固定大小的单位就是固定大小。您的布局在1个屏幕/窗口大小看起来很棒，但在其他人看来是不可预测的
某些屏幕尺寸需要通过缩放单元来完成主要的布局更改，因为您需要一组不同的CSS以及将这组CSS应用于相应屏幕尺寸的方法，因此媒体查询

但是，有很多框架可以帮助您完成所有这些工作，请参阅skeleton和Boostrap

如果我让窗口变小，我的布局会自动混合

1 个答案: