我的网站是响应无处不在，但当调整浏览器窗口的大小

Question

我不知道为什么，但是在开发工具和移动设备上，我的网站都是响应的，但是当我调整浏览器窗口的大小时，它没有达到断点，并且投资组合网格没有从3列切换到1列。这对我来说是一个问题，因为这是我的投资组合网站，我将发送给雇主，我知道他们喜欢调整窗口的大小来检查响应。提前感谢您的建议。

/*Globals*/

@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap');
* {
margin: 0;
padding: 0%;
box-sizing: border-box;
font-family: 'Hachi Maru Pop', monospace;
}

body {
line-height: 1.6;
}

.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}

ul {
list-style-type: none;
}

a {
text-decoration: none;
}

img {
display: block;
margin: auto;
}

.greeting {
margin-top: 60px;
font-size: 35px;
padding-bottom: 20px;
}

p {
margin: 15px auto 0px auto;
font-size: 16px;
}
/* Repeating Styles*/

.greeting,
#about,
#portfolio,
#contact {
text-align: center;
}
p,
.contact-form {
width: 80%;
}

.navbar,
#portfolio,
.social-footer {
background: linear-gradient(to right, #ee7f7e, #f896fc, #b189f5, #87c1f1, #8ee3ee, #8cf391, #f1fa90, #f3cb8a, #f5a289);
}

span,
.greeting,
#contact,
.contact-form,
input,
.message,
.contact-form button,
.menu-options li {
background: linear-gradient(to right, #ee7f7e, #f896fc, #b189f5, #87c1f1, #8ee3ee, #8cf391, #f1fa90, #f3cb8a, #f5a289);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-o-background-clip: text;
-o-text-fill-color: transparent;
-ms-background-clip: text;
-ms-text-fill-color: transparent;
}

.marquee,
.contact-form button,
.modal {
border: 2px solid;
border-image: conic-gradient(#ee7f7e, #f896fc, #b189f5, #87c1f1, #8ee3ee, #8cf391, #f1fa90, #f3cb8a, #ee7f7e) 1
}

ul,
.navbar,
.socials,
.modal-bg,
.modal{
display: flex;
}


.contact-form input,
.contact-form textarea,
.contact-form button,
.modal-bg {
width: 100%;
}

.navbar,
.navbar a,
#portfolio {
color: #fff;
}

.contact-form label,
.marquee span {
display: inline-block;
}
.project img,
.portfolio-btn {
border: 2px solid #fff;
border-radius: 5px;
}

.contact-form input,
.contact-form textarea,
.contact-form button {
padding: 12px 20px;
outline: none;
}

.contact-form input,
.contact-form textarea{
border: none;
border-bottom: 2px solid transparent;
border-image: linear-gradient(to bottom right, #ee7f7e 0%, #f896fc 25%, #8ee3ee 50%, #f1fa90 75%, #f5a289 100%);
border-image-slice: 1;
border-radius: 3px;
}

.contact-form input:focus,
.contact-form textarea:focus {
border-bottom: 2px solid #000;
}

.modal-bg,
.modal {
justify-content: center;
}

.greeting,
.headshot,
.marquee span,
.marquee {
position: relative;
}
/* Navbar*/
.navbar{
height: 40px;
justify-content: space-between;
}

.navbar img {
margin: 10px;
}

#menu-button {
display: none;
margin: auto;
background-color : transparent;
outline: none;
border: none;
}
.sections {
margin-right: 1vh;
}

.sections li {
margin: auto 2vh;
}

.seperation {
padding: 0 1em;
border-width: 0 1px;
border-style: solid;
}

.navbar a:hover {
color: #000000;
border-bottom: solid #000000 1px;
}
/* Drop down menu */
.menu-options {
display: none;
text-align: center;
}
.page-link{
display: initial;

}
.page-link li {
margin: 50px 0;
font-size: 30px;
}
.social-link{
justify-content: space-between;
margin: 40px 10px;
font-size: 20px;
}
.menu-container {
position: absolute;
margin: auto;
top:40px;
left: 0;
right: 0;
height: 400px;
width: 100%;
z-index: 1;
animation: menu-container 1s linear;
}
.noMenu {
display: none;
}
@keyframes menu-container {
0% {
top: -90%;
}
}
/*Marquee Scroller*/

.marquee {
width: 600px;
height: 175px;
white-space: nowrap;
overflow: hidden;
margin: 5% auto;
position: relative;
}

.marquee span {
top: 15%;
left: 100%;
animation: marquee 8.5s linear infinite;
}

.marquee:hover span {
animation-play-state: paused;
}

.marquee span:nth-child(1) {
animation-delay: 0s;
}

.marquee span:nth-child(2) {
animation-delay: 0.4s;
}

.marquee span:nth-child(3) {
animation-delay: 0.8s;
}

.marquee span:nth-child(4) {
animation-delay: 1.2s;
}

.marquee span:nth-child(5) {
animation-delay: 1.6s;
}

.marquee span:nth-child(6) {
animation-delay: 2.0s;
}

.marquee span:nth-child(7) {
animation-delay: 2.4s;
}

.marquee span:nth-child(8) {
animation-delay: 2.75s;
}

@keyframes marquee {
0% {
left: 95%;
}
100% {
left: -170%;
}
}
/* Portfolio Section */

#portfolio {
padding-bottom: 5em;
}

#portfolio-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100, auto);
padding: 20px;
background-color: rgba(255, 255, 255, 0.329);
}

.portfolio-btn {
outline: none;
padding: 2%;
margin: 5px;
color: #fff;
background-color: transparent;
font-size: 15px;
font-weight: 900;
}
/* Contact Section */
#contact {
margin-top: 20px;
}
.contact-form {
margin: auto;
padding: 10px 0;
}

.contact-form label {
font-size: 20px;
padding: 5%;
}

.contact-form button {
font-size: 20px;
font-weight: 600;
cursor: pointer;
transition: 0.2s ease-in-out;
}

@media all and (min-width: 1000px) {
.contact-form {
width: 60%;
}
}

@media all and (min-width: 1080px) {
.contact-form {
width: 50%;
}
}

/*Footer*/
.footer {
display: none;
}

/* Modal */

.modal-bg {
position: fixed;
top: 0;
left: 0;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
align-items: center;
visibility: hidden;
opacity: 0;
transition: visibility 0s opacity 0.5s;
}

.modal-active {
visibility: visible;
opacity: 1;
}

.modal {
width: 30%;
height: 30%;
background-color: rgba(255, 255, 255, 0.582);
}
.modal h1 {
margin: auto;
}
/* Media Queries*/
/*Phone*/
/* Portrait */

@media only screen and (max-device-width: 500px) and (orientation: portrait) {

/* Navbar*/
.navbar {
position: absolute;
width: 100%;
top: 0;
z-index: 2;
}
#menu-button{
display: initial;
}
.menu-container{
background: #474747ea;

}
.menu-options {
display: initial;
}
.navbar img {
margin: 0;
}
.socials {
display: none;
}
.sections {
display: none;
}

/* About Section */
#about {
margin-top: 10%;
}
.greeting {
padding: 0 20px;
}

/*Marquee Scroller*/

.marquee {
bottom: initial;
left: initial;
width: 300px;
height: 175px;
}

.marquee span {
animation: marquee 9s linear infinite;
}

@keyframes marquee {
0% {
left: 200%;
}
100% {
left: -340%;
}
}
/* Portfolio Section */

#portfolio-container {
display: grid;
grid-template-columns: initial;
grid-auto-rows: initial;
}

.project {
margin: 1em;
}
/*footer*/
.footer {
display: initial;
}
.social-footer {
height: 40px;
display: flex;
align-items: center;
justify-content: space-evenly;
margin-top: 20px;
}
/* Modal */

.modal {
width: 70%;
height: 30%;
text-align: center;
}
}

/* Landscape */
@media only screen and (max-device-width: 900px){

/* Portfolio Section */

#portfolio-container {
display: grid;
grid-template-columns: initial;
grid-auto-rows: initial;
}

.project {
margin: 1em;
}
/*Marquee Scroller*/

.marquee {
bottom: initial;
left: initial;
width: 300px;
height: 175px;
}

.marquee span {
animation: marquee 9s linear infinite;
}

@keyframes marquee {
0% {
left: 200%;
}
100% {
left: -340%;
}
}
/* Modal */

.modal-bg {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
align-items: center;
visibility: hidden;
opacity: 0;
transition: visibility 0s opacity 0.5s;
}

.modal-active {
visibility: visible;
opacity: 1;
}

.modal {
width: 50%;
height: 50%;
text-align: center;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/style.css">
<title>CV</title>
</head>
<body>
<!--Nav-->
<div class="navbar">
<!-- Mobile view-->
<button id="menu-button" ><img src="/images/Favorites/icons8-menu-rounded-25.png" alt=""></button>
<!-- Desktop view-->
<div class="socials">
<a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-instagram-20.png" alt=""></a>
<a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-github-20-2.png" alt=""></a>
<a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-linkedin-20.png" alt=""></a>
</div>
<ul class="sections">
<li>
<a href="#about">About</a>
</li>
<li class="seperation">
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!--Mobile drop down menu-->
<div class="noMenu menu-container">
<div class="menu-options">
<ul class="page-link">
<li>
<a class="menu-disappear" href="#about">About</a>
</li>
<li>
<a class="menu-disappear" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="menu-disappear" href="#contact">Contact</a>
</li>
</ul>
<ul class="social-link">
<li>
<a class="menu-disappear" href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-instagram-20.png" alt="">instagram</a>
</li>
<li>
<a class="menu-disappear" href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-github-20-2.png" alt="">github</a>
</li>
<li>
<a class="menu-disappear" href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-linkedin-20.png" alt="">linkedin</a>
</li>
</ul>
</div>
</div>
<!--About-->
<div id="about">
<div class="greeting">Hello, my name is Prima. I'm a front-end web developer.
</div>
<img class="headshot" src="/images/my-pixel.gif" alt=" ">
<div class="marquee">
<span><img src="/images/Favorites/icons8-html-5-100.png" alt="HTML5"> HTML5</span>
<span><img src="/images/Favorites/icons8-css3-100.png" alt="CSS3">CSS3</span>
<span><img src="/images/Favorites/icons8-javascript-logo-100.png" alt="Javascript">Javascript</span>
<span><img src="/images/Favorites/icons8-npm-100.png" alt="NPM">Node Package Manager</span>
<span><img src="/images/Favorites/icons8-git-100.png" alt="Git Bash">Git</span>
<span><img src="/images/Favorites/icons8-webpack-100.png" alt="">Webpack</span>
<span><img src="/images/Favorites/icons8-github-100.png" alt="">Github</span>
<span><img src="/images/Favorites/icons8-react-100.png" alt="">React</span>
</div>
</div>
</div>

<!--Portfolio-->
<div id="portfolio">
<h1>Portfolio</h1>
<div id="portfolio-container">
<div class="project">
<h3>Weather App</h3>
<img src="/images/weather.png">
<a href="https://simple-weatherapplication.netlify.app/" target="_blan" rel="noopener noreferrer"><button class="portfolio-btn">Preview</button></a>
</div>
<div class="project">
<h3>Portfolio Builder</h3>
<img src="/images/cv-maker.png">
<a href="https://resumeandcvbuilder.netlify.app/" target="_blank" rel="noopener noreferrer"><button class="portfolio-btn">Preview</button></a>
</div>
<div class="project">
<h3>Etch-a-Sketch</h3>
<img src="/images/etch-a-sketch.png">
<a href="https://my-etch-a-sketch-project.netlify.app/" target="_blank" rel="noopener noreferrer"><button class="portfolio-btn">Preview</button></a>
</div>

</div>
</div>
<!--Contact-->
<div id="contact">
<h1>Contact me</h1>
<p>Send a message and I will get back to you within 24 hours.</p>
<form method="POST" class="contact-form">
<label>Name</label>
<input class="name" type="text" placeholder="name" required/>
<label>Email</label>
<input class="email" type="email" placeholder="email" required/>
<label>Message</label>
<textarea class="message" cols="30 " rows="10" placeholder="message" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
<!--Footer on Mobile-->
<div class="footer">
<div class="social-footer">
<a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-instagram-20.png" alt=""></a>
<a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-github-20-2.png" alt=""></a>
<a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-linkedin-20.png" alt=""></a>
</div>
</div>
<!--Modal-->
<div class="modal-bg">
<div class="modal">
<h1 class="message">Message sent!</h1>
</div>
</div>
<script src="https://smtpjs.com/v3/smtp.js "></script>
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-app.js "></script>
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-database.js"></script>
<script src="/js/main.js "></script>
</body>

</html>

Answer 1

好的，所以我看了一下你的代码，我认为这是因为你设置了所有的媒体查询仅为设备宽度。浏览器的高度和普通手机或开发工具的高度是不一样的。也就是对height

进行修改