网站小屏幕响应问题
Problem with the responsive on small screen on Website
我对非常小的屏幕的响应有疑问。
我解释一下：在非常小的屏幕上，我的容器越来越小，直到它们不再存在，并且向右缩小。而且我不明白为什么我还使用 bootstrap。如果你能给我解释一下。
Screenshot problem responsive 1
Screenshot problem responsive 2
提前感谢您的解决方案！
这是我的 html 和代码：
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "poppins", sans-serif;
}
h1 {
margin-top: 20px;
color: #1070b4;
font-size: 25px;
font-weight: bold;
text-transform: uppercase;
}
.logo
{
width: 200px;
}
.navbar-nav {
margin: 0 auto;
}
.nav-item .nav-link
{
color: #278CD3;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border-bottom: 3px solid transparent;
}
.nav-link:hover {
border-bottom: 3px solid #F48F17;
color: #052e6d;
}
.container-fluid {
background-color: #1070b4;
height: 550px;
}
ul {
display: flex;
justify-content: center;
}
ul li {
list-style: none;
font-size: 40px;
}
ul li a {
padding: 25px;
color: #fff;
}
.photo_beat {
width: 400px;
height: 300px;
border-radius: 20px;
box-shadow: 3px 3px 3px black;
}
p {
color: white;
text-align: center;
font-weight: 800;
font-size: 18px;
letter-spacing: .12em;
}
.big-title {
font-size: 25px;
text-transform: uppercase;
color: rgb(111, 218, 250);
}
#about {
display: grid;
}
.vertical {
margin: auto;
}
body {
font-family: "poppins", sans-serif;
}
.sound {
text-align: center;
margin-bottom: 20px;
}
#carouselExemple {
width: 80%;
margin: 0 auto;
margin-top: 20px;
}
.carousel-item iframe {
border-radius: 15px;
width: 100%;
height: 600px;
}
.carousel-control-prev {
margin: auto 0;
height: 50%;
}
.carousel-control-next {
margin: auto 0;
height: 50%;
}
@media screen and (max-width: 992px) {
.container-fluid {
height: 650px;
}
}
@media screen and (max-width: 440px) {
.container-fluid {
width: auto;
}
.photo_beat {
width: 350px;
height: 250px;
text-align: center;
}
}
@media screen and (max-width: 399px) {
a.navbar-brand {
margin: 0 auto;
}
ul.navbar-nav {
margin-top: 10px;;
}
}
@media screen and (max-width: 807px) {
p {
font-size: 14px;
margin-top: 25px;
}
}
@media screen and (max-width: 400px) {
.vertical p {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PierroAlaProd | Beatmaker Production</title>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/019d409e34.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<header>
<div class="container">
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="index.html"><img class="logo" src="img/Signature logo.png" alt="Logo"/></a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="index.html">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#sound">Instrumentales</a></li>
<li class="nav-item"><a class="nav-link" href="#projets">Projets</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
</ul>
</nav>
</div>
</header>
<body>
<div class="citations">
<div class="container-fluid">
<div class="container d-flex h-100">
<div class="row align-self-center">
<div class="col-md-12 col-lg-6">
<img class="photo_beat" src="img/beatmaking1.jpg" alt="Photo Beatmaker"/>
</div>
<div class="col-md-12 col-lg-6">
<p>“La musique commence là où s'arrête le pouvoir des mots.” <br> - Richard Wagner <br> <br>“La musique est la langue des émotions.”<br> - Emmanuel Kant <br><br> “La vie sans musique est tout simplement une erreur, une fatigue, un exil.” <br> - Friedrich Nietzsche </p>
</div>
</div>
</div>
</div>
</div>
<div class="sound">
<div id="sound" class="container">
<h1>Instrumentales</h1>
<div id="carouselExemple" class="carousel slide" data-ride="carousel" data-interval="8000">
<ol class="carousel-indicators">
<li data-target="#carouselExemple" data-slide-to="0" class="active"></li>
<li data-target="#carouselExemple" data-slide-to="1"></li>
<li data-target="#carouselExemple" data-slide-to="2"></li>
<li data-target="#carouselExemple" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/925656313&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/rain" title="rain" target="_blank" style="color: #cccccc; text-decoration: none;">rain</a></div>
</div>
<div class="carousel-item">
<iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/775177567&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/naruto-sadness-and-sorrow" title="Naruto (Sadness and Sorrow)" target="_blank" style="color: #cccccc; text-decoration: none;">Naruto (Sadness and Sorrow)</a></div>
</div>
<div class="carousel-item">
<iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/879846058%3Fsecret_token%3Ds-bJFTVUbSC5h&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/broken/s-bJFTVUbSC5h" title="broken" target="_blank" style="color: #cccccc; text-decoration: none;">broken</a></div>
</div>
<div class="carousel-item">
<iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/905301598&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/la-famiglia" title="La Famiglia" target="_blank" style="color: #cccccc; text-decoration: none;">La Famiglia</a></div>
</div>
</div>
<a href="#carouselExemple" class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="ture"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#carouselExemple" class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="propos">
<div id="about" class="container-fluid">
<div class="container">
<div class="vertical">
<p></p>
<ul class="liens">
<li><a href="https://www.facebook.com" target="_blank"> <i class="fab fa-facebook-square"></i> </a></li>
<li><a href="https://twitter.com" target="_blank"> <i class="fab fa-twitter-square"></i></a></li>
<li><a href="https://github.com" target="_blank"> <i class="fab fa-github-square"></i></a></li>
<li><a href="https://soundcloud.com/pierroalaprod" target="_blank" alt="Soundclound PierroAlaProd"> </i><i class="fab fa-soundcloud"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
我认为问题在于导航没有适应视口宽度的变化。也许尝试减小字体大小或为小型设备构建导航菜单。
您可以在这里查看一些建议：https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
在您的 css 中，您将 ul li a 的填充设置为 25px，这导致您的导航宽度比视口宽：
ul li a {
padding: 25px;
color: #fff;
}
将其调整为不同的填充以获得较小的宽度应该可以解决问题，或者 - 就像 Miguel 所说的 - 你可以使它成为一个可折叠的导航 https://getbootstrap.com/docs/4.0/components/navbar/#nav
我对非常小的屏幕的响应有疑问。 我解释一下：在非常小的屏幕上，我的容器越来越小，直到它们不再存在，并且向右缩小。而且我不明白为什么我还使用 bootstrap。如果你能给我解释一下。
Screenshot problem responsive 1
Screenshot problem responsive 2
提前感谢您的解决方案！
这是我的 html 和代码：
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "poppins", sans-serif;
}
h1 {
margin-top: 20px;
color: #1070b4;
font-size: 25px;
font-weight: bold;
text-transform: uppercase;
}
.logo
{
width: 200px;
}
.navbar-nav {
margin: 0 auto;
}
.nav-item .nav-link
{
color: #278CD3;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border-bottom: 3px solid transparent;
}
.nav-link:hover {
border-bottom: 3px solid #F48F17;
color: #052e6d;
}
.container-fluid {
background-color: #1070b4;
height: 550px;
}
ul {
display: flex;
justify-content: center;
}
ul li {
list-style: none;
font-size: 40px;
}
ul li a {
padding: 25px;
color: #fff;
}
.photo_beat {
width: 400px;
height: 300px;
border-radius: 20px;
box-shadow: 3px 3px 3px black;
}
p {
color: white;
text-align: center;
font-weight: 800;
font-size: 18px;
letter-spacing: .12em;
}
.big-title {
font-size: 25px;
text-transform: uppercase;
color: rgb(111, 218, 250);
}
#about {
display: grid;
}
.vertical {
margin: auto;
}
body {
font-family: "poppins", sans-serif;
}
.sound {
text-align: center;
margin-bottom: 20px;
}
#carouselExemple {
width: 80%;
margin: 0 auto;
margin-top: 20px;
}
.carousel-item iframe {
border-radius: 15px;
width: 100%;
height: 600px;
}
.carousel-control-prev {
margin: auto 0;
height: 50%;
}
.carousel-control-next {
margin: auto 0;
height: 50%;
}
@media screen and (max-width: 992px) {
.container-fluid {
height: 650px;
}
}
@media screen and (max-width: 440px) {
.container-fluid {
width: auto;
}
.photo_beat {
width: 350px;
height: 250px;
text-align: center;
}
}
@media screen and (max-width: 399px) {
a.navbar-brand {
margin: 0 auto;
}
ul.navbar-nav {
margin-top: 10px;;
}
}
@media screen and (max-width: 807px) {
p {
font-size: 14px;
margin-top: 25px;
}
}
@media screen and (max-width: 400px) {
.vertical p {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PierroAlaProd | Beatmaker Production</title>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/019d409e34.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<header>
<div class="container">
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="index.html"><img class="logo" src="img/Signature logo.png" alt="Logo"/></a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="index.html">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#sound">Instrumentales</a></li>
<li class="nav-item"><a class="nav-link" href="#projets">Projets</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
</ul>
</nav>
</div>
</header>
<body>
<div class="citations">
<div class="container-fluid">
<div class="container d-flex h-100">
<div class="row align-self-center">
<div class="col-md-12 col-lg-6">
<img class="photo_beat" src="img/beatmaking1.jpg" alt="Photo Beatmaker"/>
</div>
<div class="col-md-12 col-lg-6">
<p>“La musique commence là où s'arrête le pouvoir des mots.” <br> - Richard Wagner <br> <br>“La musique est la langue des émotions.”<br> - Emmanuel Kant <br><br> “La vie sans musique est tout simplement une erreur, une fatigue, un exil.” <br> - Friedrich Nietzsche </p>
</div>
</div>
</div>
</div>
</div>
<div class="sound">
<div id="sound" class="container">
<h1>Instrumentales</h1>
<div id="carouselExemple" class="carousel slide" data-ride="carousel" data-interval="8000">
<ol class="carousel-indicators">
<li data-target="#carouselExemple" data-slide-to="0" class="active"></li>
<li data-target="#carouselExemple" data-slide-to="1"></li>
<li data-target="#carouselExemple" data-slide-to="2"></li>
<li data-target="#carouselExemple" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/925656313&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/rain" title="rain" target="_blank" style="color: #cccccc; text-decoration: none;">rain</a></div>
</div>
<div class="carousel-item">
<iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/775177567&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/naruto-sadness-and-sorrow" title="Naruto (Sadness and Sorrow)" target="_blank" style="color: #cccccc; text-decoration: none;">Naruto (Sadness and Sorrow)</a></div>
</div>
<div class="carousel-item">
<iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/879846058%3Fsecret_token%3Ds-bJFTVUbSC5h&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/broken/s-bJFTVUbSC5h" title="broken" target="_blank" style="color: #cccccc; text-decoration: none;">broken</a></div>
</div>
<div class="carousel-item">
<iframe class="d-block" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/905301598&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/pierroalaprod" title="Pierro a la Prod" target="_blank" style="color: #cccccc; text-decoration: none;">Pierro a la Prod</a> · <a href="https://soundcloud.com/pierroalaprod/la-famiglia" title="La Famiglia" target="_blank" style="color: #cccccc; text-decoration: none;">La Famiglia</a></div>
</div>
</div>
<a href="#carouselExemple" class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="ture"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#carouselExemple" class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="propos">
<div id="about" class="container-fluid">
<div class="container">
<div class="vertical">
<p></p>
<ul class="liens">
<li><a href="https://www.facebook.com" target="_blank"> <i class="fab fa-facebook-square"></i> </a></li>
<li><a href="https://twitter.com" target="_blank"> <i class="fab fa-twitter-square"></i></a></li>
<li><a href="https://github.com" target="_blank"> <i class="fab fa-github-square"></i></a></li>
<li><a href="https://soundcloud.com/pierroalaprod" target="_blank" alt="Soundclound PierroAlaProd"> </i><i class="fab fa-soundcloud"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
我认为问题在于导航没有适应视口宽度的变化。也许尝试减小字体大小或为小型设备构建导航菜单。
您可以在这里查看一些建议：https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
在您的 css 中，您将 ul li a 的填充设置为 25px，这导致您的导航宽度比视口宽：
ul li a {
padding: 25px;
color: #fff;
}
将其调整为不同的填充以获得较小的宽度应该可以解决问题，或者 - 就像 Miguel 所说的 - 你可以使它成为一个可折叠的导航 https://getbootstrap.com/docs/4.0/components/navbar/#nav