Question

您好我在使用更小的尺寸调整浏览器大小时遇到了问题。文本和div会变形，移动或移动而不是保持原位。我不知道如何解决它。有谁知道我做错了什么？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="container">
<div id="header"</div>
    <div id="logo"><h2>Logo</h2></div>
        <div id="navbar">
        <a href=""><h3 class="navlink">Home</h3></a>
        <a href=""><h3 class="navlink">About Me</h3></a>
        <a href=""><h3 class="navlink">Tips and Tricks</h3></a>
        <a href=""><h3 class="navlink">Contact Me</h3></a>
    </div>
</div>

<div id="content"><h1>Content</h1><h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit tenetur sint sapiente similique laborum eius nisi, repellat ratione deleniti, inventore accusantium ut corporis reiciendis eum enim. Expedita nostrum error. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit repellat dolore fugiat ab ut quisquam dicta atque aliquid sapiente, autem veniam placeat id quod tempore culpa! Velit sint, molestias nesciunt.</h2>


</div>
<div id="menu"><h2>Categories</h2>
    <ul>
        <li><a href="">News</a></li>
        <li><a href="">Gaming</a></li>
        <li><a href="">Movies</a></li>
        <li><a href="">Television</a></li>
        <li><a href="">Music</a></li>
    </ul>

</div>

<div id="footer"><h2>Footer</h2></div>


</div>


</div>


</div>

</body>
</html>

stylesheet.css中：

#body {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

#container {
    width: 100%;
    height: 1000px;
    max-width: 1260px;
    min-width: 760px;
    margin: auto;
    background-color: #f2f2f2;
}

#header {
    width: 100%;
    height: 15%;
    margin: auto;
    margin-top: 5%;
    background-color: 0ddfff;
}

#logo {
    width: 20%;
    height: 40%;
    margin-top: 5%;
    float: left;
    margin-left: 2%;
    border: 1px solid black;
}

#navbar {
    width: 40%;
    height: 40%;
    margin-top: 5%;
    float: right;
    border: 1px solid black;
    margin-right: 10%;
}

.navlink {
    display: inline-block;
    padding-left: 2%;
}

#content {
    width: 60%;
    height: 40%;
    border: 1px solid black;
    float: left;
}

#menu {
    width: 20%;
    height: 30%;
    border: 1px solid black;
    float: left;
    margin-bottom: 30%;
    margin-left: 19.4%;
}

#footer {
    width: 100%;
    height: 10%;
    margin: auto;
    margin-top: 60%;
    border: 1px solid black;
}

Answer 1

您已使用百分比单位作为宽度（示例：#logo{width:20%;}，因此在小屏幕中打开页面时，它会显示当前屏幕宽度的百分比。您有两个选项可以解决此问题。

1）使用像素单位而不是百分比 2）使用media-query并为小分辨率（响应布局）编写css。

Answer 2

您的主要问题是，当您似乎真正想要元素的特定宽度时，您正在使用自适应样式（以％表示宽度和位置）。当您调整浏览器大小时，您想要发生什么并不是很清楚，但这里有一个快速概述：

如果你希望你的元素总是相同的大小，用像素来定义它的宽度和高度，就像这样（你也可能想要以相同的方式定义你的边距）：width：400px;身高：20px;
如果您希望元素从左侧开始总是四分之一页宽，您可以执行以下操作：margin-left：25％;
如果您希望元素在特定点之前调整大小，请通过指定最小宽度或最大宽度来跟踪#container元素css样式的操作。

我觉得应该提一些额外的事情：

在你的CSS中，你将body称为#body，但是你没有id为body的div，所以这种风格并不是指任何东西。您可能希望更改该css样式，以便它代替正文，因为正文是标记。
这是一个问题：＆lt; div id =“header”＆lt; / div＆gt;，它缺少一个“＆gt;”在结束标签之前，不清楚你是否希望它下面的物品嵌套在里面。这样的事情可以防止你的一些风格按照你期望的方式进行。

浏览器调整大小问题如何解决？

2 个答案: