每当我用google chrome的开发工具测试响应性时，当我选择Galaxy折叠设备或当我通过chrome开发工具缩小屏幕宽度时，当尺寸低于300 x 655时，标题的背景会崩溃。如何使其100%的宽度在所有屏幕尺寸?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #202063;
color: gainsboro;
ul {
li {
list-style-type: none;
cursor: pointer;
}
}
a {
text-decoration: none;
color: inherit;
}
main,
header {
padding: 20px;
}
}
header {
display: flex;
background-color: #fff;
color: #202063;
font-weight: bold;
justify-content: space-between;
nav {
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
li {
margin: 0 10px;
}
li:hover {
border-bottom: 2px solid rgb(255, 255, 255);
padding-bottom: 4px;
}
}
}
}
.text_center {
text-align: center !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>MrSrv7</title>
</head>
<body>
<header>
<h4 id="brand_text" class="text_center">MrSrv7</h4>
<nav>
<ul id="navlinks">
<li>
<a href="#about">
About
</a>
</li>
<li>
<a href="#contact"> Contact </a>
</li>
<li>
<a href="#testimonials"> Testimonials </a>
</li>
</ul>
</nav>
</header>
</body>
</html>你需要添加:width=device-width in tag
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #202063;
color: gainsboro;
ul {
li {
list-style-type: none;
cursor: pointer;
}
}
a {
text-decoration: none;
color: inherit;
}
main,
header {
padding: 20px;
}
}
header {
display: flex;
background-color: #fff;
color: #202063;
font-weight: bold;
justify-content: space-between;
nav {
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
li {
margin: 0 10px;
}
li:hover {
border-bottom: 2px solid rgb(255, 255, 255);
padding-bottom: 4px;
}
}
}
}
.text_center {
text-align: center !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h4 id="brand_text" class="text_center">MrSrv7</h4>
<nav>
<ul id="navlinks">
<li>
<a href="#about">
About
</a>
</li>
<li>
<a href="#contact"> Contact </a>
</li>
<li>
<a href="#testimonials"> Testimonials </a>
</li>
</ul>
</nav>
</header>
</body>
</html>你试过将最小宽度设置为100%吗?我不知道你的导航栏现在是什么样子。
header{
min-width:100%
}