为什么当我缩放并滑动到右侧时，我的页眉没有占据整个页面？当我缩放时，标题似乎没有占据所有页面，这有点奇怪。。。
在片段模式下使用整页，缩放到400/500%，然后向右滑动，这将显示我提到的问题。
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: #172424;
}
header {
width: 100vw;
background-color: #5fb5dd;
display: flex;
align-items: center;
justify-content: space-between;
}
header div {
display: flex;
align-items: center;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin: 0 10px;
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<img src="" alt="logo-img">
<h1>some text</h1>
</div>
<nav>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</nav>
</header>
</body>
</html>body {
overflow-x: hidden;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: #172424;
}
header {
width: 100vw;
background-color: #5fb5dd;
display: flex;
align-items: center;
justify-content: space-between;
}
header div {
display: flex;
align-items: center;
}
nav ul {
margin-right: 31px;
display: flex;
list-style: none;
}
nav ul li {
margin: 0 10px;
}
@media screen and (max-width: 500px) {
header {
flex-wrap: wrap;
justify-content: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Always remember to add this three lines if you need reponsiveness -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<img src="" alt="logo-img">
<h1>some text</h1>
</div>
<nav>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</nav>
</header>
</body>
</html>
请参阅此代码只是做了一些更改。你总是需要使用媒体查询的响应网站