Question

当我们通常放大或缩小网页时（通过按Ctrl +或Ctrl - ），整个页面组件保持在一起，就像本页的以下屏幕截图一样

enter image description here

但是当我缩放网页而不是缩放到特定区域时，组件会变形

enter image description here

这是我的HTML

<!doctype html>
<html>
<head>
    <title>Are you ready for the show?</title>
    <link rel="stylesheet" href="css/global.css"/>
</head>
<body>
    <div id="header">
        <a href="home.php">
            <img src="../images/logo.png"></img>
            <span id="logo_name">Dooms Day</span>
        </a>
        <span id="login">
            LogIn
        </span> 
    </div>
</dody>
</html>

和css

*
{
    margin:0;
    padding:0;
}

body
{
    font-family:Palatino,Georgio,"Times New Roman",Times,serif;
}

#header
{
    position: relative;
    width:100%;
    background: none repeat scroll 0% 0% rgb(50,51,47);
    height:80px;
}

#header a
{
    text-decoration: none;
    color:white;
}
#logo_name
{
    font-size:25px;
}
#header img
{
    padding-top:12px;
    margin-left:10%;
}

#login
{
    width:auto;
    height:auto;
    font-size:20px;
    padding:8px 20px 8px 20px;
    background-color: rgb(100,192,0);
    margin-left: 60%;
    border-radius: 10px
}

我应该怎样做才能达到对称性所必需的效果？

缩放网页会扭曲我的网页布局

0 个答案: