网页在移动设备上开始缩小
Webpage starts zoomed out on mobile devices
我已经为桌面和移动设备创建了一个网站，它必须是响应式的。我的问题是，当我调整浏览器大小时，所有内容都被缩小而不是适应。 HTML 我也有问题。为什么根据开发工具它只占用页面的 1/3，当我将 width:1100px 添加到我的部分时它会呈现桌面版本，但当我将它拿走时它会漂浮到左侧？为什么会这样？
问题图片：
- Image 1
- Image 2
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: black;
color: white;
line-height: 30px;
}
html {
width:100%;
}
img {
width: 100%;
}
h1 {
font-weight: 700;
font-size: 44px;
margin-bottom: 40px;
line-height: 50px;
}
h3 {
width: 100%;
}
/* header */
header {
display: flex;
background-color: black;
height: 80px;
min-width: 1100px;
justify-content: right;
align-items: center;
margin-bottom: 50px;
border-bottom: 1px solid white;
}
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
}
.nav-links{
color: white;
font-size: 18px;
}
/* Banner */
.banner {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 500px;
width: 100%;
}
.banner-text-container {
max-width: 30%;
font-size: 22px;
}
span {
color: #11cc9e;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 40%;
text-align: center;
padding: 5px;
}
.consultation-link:hover{
background-color: #fff;
}
/* About */
.about {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 600px;
min-width: 1100px;
}
.about-text-container {
max-width: 40%;
font-size: 22px;
margin-left: 20px;
}
.about-img{
width: 400px;
margin-right: 22px;
}
.about-title {
margin-bottom: 40px;
}
.about-us-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 25%;
padding: 5px;
}
.about-us-link:hover{
background-color: #fff;
}
/* Join */
.join {
min-height: 600px;
min-width: 1100px;
max-width: 100%;
}
.join-header{
width: 100%;
text-align: center;
margin-top: 150px;
font-size: 40px;
}
.container-boxes{
position: relative;
top: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
min-height: 500px;
min-width: 1100px;
}
.box {
position: relative;
overflow: hidden;
transition: 0.5s;
height: 200px;
width: 300px;
}
.box:hover{
z-index: 1;
transform: scale(1.25);
box-shadow: 0 25px 40px rgba(0, 0, 0, .5);
cursor: pointer;
}
.box .imgBX{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.box .imgBX:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(180deg,rgba(0,0,0.7),#79dbc3);
mix-blend-mode: multiply;
opacity: 0;
transition: 0.5s;
}
.box:hover .imgBX:before {
opacity: 1;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content{
display: flex;
flex-direction: column;
text-align: center;
position: absolute;
top: 20%;
bottom: 40%;
width: 100%;
height: 100%;
z-index: 1;
padding: 20px;
visibility: hidden;
}
.box:hover .content{
visibility: visible;
}
/* Quote section */
.quote-section {
display: flex;
justify-content: center;
max-width: 100%;
min-height: 500px;
min-width: 1100px;
}
.quote-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-items: center;
max-width: 50%;
font-size: 22px;
text-align: center;
}
.quote {
line-height: 90px;
font-size: 150px;
font-style: italic;
color: #11cc9e;
text-indent: -37px;
font-weight: 600;
width: 37px;
}
.quote-img{
width: 90px;
margin: 40px auto;
}
.person-name{
color: #ccc;
}
.person-role{
font-size: 17px;
color: #ccc;
}
/* Footer */
footer {
text-align: center;
margin-top: 100px;
padding-top: 50px;
max-width: 100%;
min-height: 200px;
min-width: 1100px;
border-top: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codes</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<ink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./Resources/styles.css">
</head>
<body>
<header>
<!-- insert logo -->
<nav class="nav-links">
<ul>
<li>About</li>
<li>Peer group</li>
<li>Review</li>
</ul>
</nav>
</header>
<section class="banner">
<div class="banner-text-container">
<h1>Build. Grow. <span class="color-Learn">Learn.</span></h1>
<p>Unlock your potential with your peers!, using Blockchain, Fintech or the IT outsourcing company Boosty Labs helps you create an innovative end to end product or augment your team with the right experts.</p>
<a class="consultation-link" href="#">Free consultation </a>
</div>
<div class="banner-img">
<img src="./Resources/Images/banner.png" alt="">
</div>
</section>
<section class="about">
<div class="about-text-container">
<h2 class="about-title">Who we are</h2>
<p>Here you can find our ,collection of coding, data science and statistics tutorials with examples in R, Python, JavaScript and Python. As you click through, you'll notice that some tutorials have ribbons on their logos - they are part of our free and self-paced online course Data Science for Ecologists and Environmental Scientists! Yellow for the Stats from Scratch stream, blue for Wiz of Data Viz and purple for Mastering Modelling.</p>
<a class="about-us-link" href="#">More about us </a>
</div>
<div class="about-img">
<img src="./Resources/Images/whoweare.png" alt="">
</div>
</section>
<section class="join">
<h3 class="join-header" >Join a peer group!</h3>
<div class="container-boxes">
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-1.png" alt="">
</div>
<div class="content">
<h3>AI</h3>
<P>Discover The Complete Range Of Artificial Intelligence Solutions.</P>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-2.png" alt="">
</div>
<div class="content">
<h3 class="frontend-title">Frontend Dev</h3>
<p>Discover The Complete Range Of Frontend Solutions.</p>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-3.png" alt="">
</div>
<div class="content">
<h3>Microsoft systems</h3>
<p>Discover The Complete Range Of Microsoft Solutions.</p>
</div>
</div>
</div>
</section>
<section class="quote-section">
<div class="quote-container">
<div class="quote">"</div>
<p class="p-quote">In coded, the progress of the topics and the exercises are really good. It's so nice to practice on good story told tasks. Also if you are stuck, it is nice to have a broad range of coders around in the peer groups that you can get the answers you are looking for.</p>
<div class="quote-img">
<img src="./Resources/Images/person-img.png" alt="">
</div>
<div class="person-name">Peter Gangland </div>
<div class="person-role">Director of business dev at <span>Microsoft</span></div>
</div>
</section>
<footer>
<div id="contact">
<h2>
Contact us</h5>
<h5>coded@peers.com</h5>
<h5>831-867-5309</h5>
</div>
<div id="copyright">
<h5>@copyright coded Enterprises 2022</h5>
</div>
</footer>
</body>
</html>
要使您的网站响应迅速，您需要使用 media queries。这就像您告诉浏览器如何为您的网站设置不同尺寸的样式。我认为如果您尝试使您的网站具有响应性，您的版块问题也可能会得到解决。
我注意到的一些问题：
网页加载后缩小屏幕宽度时打开水平滚动条；这种情况不适合响应式设计。为了避免这种情况，在我用的<body>样式中加上overflow-x: hidden。
您应该使用媒体查询来制作移动响应式网站。在此示例中，我编辑了 <img> 元素以在页面缩小时将其删除。
我完全删除了您添加到元素中的 width: 1100px 样式。您不需要使用此类型来为元素提供宽度。
在移动响应网站上，<img> 个元素在新行上以 100% 宽度显示；你可以在这个阶段通过使用媒体查询来实现这个想法。
您可以根据CSS中设备的显示大小访问this link媒体查询块。
例如，当页面大小低于 880px:
时应用 @media only screen and (max-width: 880px){} 中的样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: black;
color: white;
line-height: 30px;
width:100%;
overflow-x: hidden;
}
img {
width: 100%;
}
h1 {
font-weight: 700;
font-size: 44px;
margin-bottom: 40px;
line-height: 50px;
}
h3 {
width: 100%;
}
header {
display: flex;
background-color: black;
height: 80px;
justify-content: right;
align-items: center;
margin-bottom: 50px;
border-bottom: 1px solid white;
}
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
}
.nav-links{
color: white;
font-size: 18px;
}
.banner {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 500px;
width: 100%;
}
.banner-text-container {
max-width: 30%;
font-size: 22px;
}
span {
color: #11cc9e;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 40%;
text-align: center;
padding: 5px;
}
.consultation-link:hover{
background-color: #fff;
}
.about {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 600px;
}
.about-text-container {
max-width: 40%;
font-size: 22px;
margin-left: 20px;
}
.about-img{
width: 400px;
margin-right: 22px;
}
.about-title {
margin-bottom: 40px;
width: 100% !important;
}
.about-us-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 25%;
padding: 5px;
}
.about-us-link:hover{
background-color: #fff;
}
.join {
/* */
}
.join-header{
width: 100%;
text-align: center;
margin-top: 75px;
font-size: 40px;
}
.container-boxes{
position: relative;
top: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
min-height: 500px;
}
.box {
position: relative;
overflow: hidden;
transition: 0.5s;
height: 200px;
width: 300px;
}
.box:hover{
z-index: 1;
transform: scale(1.25);
box-shadow: 0 25px 40px rgba(0, 0, 0, .5);
cursor: pointer;
}
.box .imgBX{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.box .imgBX:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(180deg,rgba(0,0,0.7),#79dbc3);
mix-blend-mode: multiply;
opacity: 0;
transition: 0.5s;
}
.box:hover .imgBX:before {
opacity: 1;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content{
display: flex;
flex-direction: column;
text-align: center;
position: absolute;
top: 20%;
bottom: 40%;
width: 100%;
height: 100%;
z-index: 1;
padding: 20px;
visibility: hidden;
}
.box:hover .content{
visibility: visible;
}
/* Quote section */
.quote-section {
display: flex;
justify-content: center;
max-width: 100%;
min-height: 500px;
}
.quote-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-items: center;
max-width: 50%;
font-size: 22px;
text-align: center;
}
.quote {
line-height: 90px;
font-size: 150px;
font-style: italic;
color: #11cc9e;
text-indent: -37px;
font-weight: 600;
width: 37px;
}
.quote-img{
width: 90px;
margin: 40px auto;
}
.person-name{
color: #ccc;
}
.person-role{
font-size: 17px;
color: #ccc;
}
footer {
text-align: center;
margin-top: 100px;
padding-top: 50px;
max-width: 100%;
min-height: 200px;
border-top: 1px solid #fff;
}
@media only screen and (max-width: 1279px) {
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
color: #11cc9e;
}
}
@media only screen and (max-width: 880px){
html{
margin-left: 25px !important;
margin-right: 25px !important;
}
.banner-text-container {
max-width: 100%;
font-size: 20px;
}
img{
display: none;
}
.about-text-container {
max-width: 100% !important;
font-size: 22px;
}
.about-text-container {
margin-left: 0px;
}
.about {
display: inline;
}
.banner {
display: inline;
justify-content: space-around;
width: 100%;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-bottom: 50px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 100%;
text-align: center;
padding: 5px;
}
.about-us-link {
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 100%;
padding: 5px;
}
.join{
display: none;
}
.join-header{
display: none;
}
.quote-section{
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codes</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<ink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- insert logo -->
<nav class="nav-links">
<ul>
<li>About</li>
<li>Peer group</li>
<li>Review</li>
</ul>
</nav>
</header>
<section class="banner">
<div class="banner-text-container">
<h1>Build. Grow. <span class="color-Learn">Learn.</span></h1>
<p>Unlock your potential with your peers!, using Blockchain, Fintech or the IT outsourcing company Boosty Labs helps you create an innovative end to end product or augment your team with the right experts.</p>
<a class="consultation-link" href="#">Free consultation </a>
</div>
<div class="banner-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
</section>
<section class="about">
<div class="about-text-container">
<h2 class="about-title">Who we are</h2>
<p>Here you can find our ,collection of coding, data science and statistics tutorials with examples in R, Python, JavaScript and Python. As you click through, you'll notice that some tutorials have ribbons on their logos - they are part of our free and self-paced online course Data Science for Ecologists and Environmental Scientists! Yellow for the Stats from Scratch stream, blue for Wiz of Data Viz and purple for Mastering Modelling.</p>
<a class="about-us-link" href="#">More about us </a>
</div>
<div class="about-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
</section>
<section class="join">
<h3 class="join-header" >Join a peer group!</h3>
<div class="container-boxes">
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3>AI</h3>
<P>Discover The Complete Range Of Artificial Intelligence Solutions.</P>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3 class="frontend-title">Frontend Dev</h3>
<p>Discover The Complete Range Of Frontend Solutions.</p>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3>Microsoft systems</h3>
<p>Discover The Complete Range Of Microsoft Solutions.</p>
</div>
</div>
</div>
</section>
<section class="quote-section">
<div class="quote-container">
<div class="quote">"</div>
<p class="p-quote">In coded, the progress of the topics and the exercises are really good. It's so nice to practice on good story told tasks. Also if you are stuck, it is nice to have a broad range of coders around in the peer groups that you can get the answers you are looking for.</p>
<div class="quote-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="person-name">Peter Gangland </div>
<div class="person-role">Director of business dev at <span>Microsoft</span></div>
</div>
</section>
<footer>
<div id="contact">
<h2>
Contact us</h5>
<h5>coded@peers.com</h5>
<h5>831-867-5309</h5>
</div>
<div id="copyright">
<h5>@copyright coded Enterprises 2022</h5>
</div>
</footer>
</body>
</html>
我已经为桌面和移动设备创建了一个网站，它必须是响应式的。我的问题是，当我调整浏览器大小时，所有内容都被缩小而不是适应。 HTML 我也有问题。为什么根据开发工具它只占用页面的 1/3，当我将 width:1100px 添加到我的部分时它会呈现桌面版本，但当我将它拿走时它会漂浮到左侧？为什么会这样？
问题图片：
- Image 1
- Image 2
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: black;
color: white;
line-height: 30px;
}
html {
width:100%;
}
img {
width: 100%;
}
h1 {
font-weight: 700;
font-size: 44px;
margin-bottom: 40px;
line-height: 50px;
}
h3 {
width: 100%;
}
/* header */
header {
display: flex;
background-color: black;
height: 80px;
min-width: 1100px;
justify-content: right;
align-items: center;
margin-bottom: 50px;
border-bottom: 1px solid white;
}
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
}
.nav-links{
color: white;
font-size: 18px;
}
/* Banner */
.banner {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 500px;
width: 100%;
}
.banner-text-container {
max-width: 30%;
font-size: 22px;
}
span {
color: #11cc9e;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 40%;
text-align: center;
padding: 5px;
}
.consultation-link:hover{
background-color: #fff;
}
/* About */
.about {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 600px;
min-width: 1100px;
}
.about-text-container {
max-width: 40%;
font-size: 22px;
margin-left: 20px;
}
.about-img{
width: 400px;
margin-right: 22px;
}
.about-title {
margin-bottom: 40px;
}
.about-us-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 25%;
padding: 5px;
}
.about-us-link:hover{
background-color: #fff;
}
/* Join */
.join {
min-height: 600px;
min-width: 1100px;
max-width: 100%;
}
.join-header{
width: 100%;
text-align: center;
margin-top: 150px;
font-size: 40px;
}
.container-boxes{
position: relative;
top: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
min-height: 500px;
min-width: 1100px;
}
.box {
position: relative;
overflow: hidden;
transition: 0.5s;
height: 200px;
width: 300px;
}
.box:hover{
z-index: 1;
transform: scale(1.25);
box-shadow: 0 25px 40px rgba(0, 0, 0, .5);
cursor: pointer;
}
.box .imgBX{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.box .imgBX:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(180deg,rgba(0,0,0.7),#79dbc3);
mix-blend-mode: multiply;
opacity: 0;
transition: 0.5s;
}
.box:hover .imgBX:before {
opacity: 1;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content{
display: flex;
flex-direction: column;
text-align: center;
position: absolute;
top: 20%;
bottom: 40%;
width: 100%;
height: 100%;
z-index: 1;
padding: 20px;
visibility: hidden;
}
.box:hover .content{
visibility: visible;
}
/* Quote section */
.quote-section {
display: flex;
justify-content: center;
max-width: 100%;
min-height: 500px;
min-width: 1100px;
}
.quote-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-items: center;
max-width: 50%;
font-size: 22px;
text-align: center;
}
.quote {
line-height: 90px;
font-size: 150px;
font-style: italic;
color: #11cc9e;
text-indent: -37px;
font-weight: 600;
width: 37px;
}
.quote-img{
width: 90px;
margin: 40px auto;
}
.person-name{
color: #ccc;
}
.person-role{
font-size: 17px;
color: #ccc;
}
/* Footer */
footer {
text-align: center;
margin-top: 100px;
padding-top: 50px;
max-width: 100%;
min-height: 200px;
min-width: 1100px;
border-top: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codes</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<ink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./Resources/styles.css">
</head>
<body>
<header>
<!-- insert logo -->
<nav class="nav-links">
<ul>
<li>About</li>
<li>Peer group</li>
<li>Review</li>
</ul>
</nav>
</header>
<section class="banner">
<div class="banner-text-container">
<h1>Build. Grow. <span class="color-Learn">Learn.</span></h1>
<p>Unlock your potential with your peers!, using Blockchain, Fintech or the IT outsourcing company Boosty Labs helps you create an innovative end to end product or augment your team with the right experts.</p>
<a class="consultation-link" href="#">Free consultation </a>
</div>
<div class="banner-img">
<img src="./Resources/Images/banner.png" alt="">
</div>
</section>
<section class="about">
<div class="about-text-container">
<h2 class="about-title">Who we are</h2>
<p>Here you can find our ,collection of coding, data science and statistics tutorials with examples in R, Python, JavaScript and Python. As you click through, you'll notice that some tutorials have ribbons on their logos - they are part of our free and self-paced online course Data Science for Ecologists and Environmental Scientists! Yellow for the Stats from Scratch stream, blue for Wiz of Data Viz and purple for Mastering Modelling.</p>
<a class="about-us-link" href="#">More about us </a>
</div>
<div class="about-img">
<img src="./Resources/Images/whoweare.png" alt="">
</div>
</section>
<section class="join">
<h3 class="join-header" >Join a peer group!</h3>
<div class="container-boxes">
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-1.png" alt="">
</div>
<div class="content">
<h3>AI</h3>
<P>Discover The Complete Range Of Artificial Intelligence Solutions.</P>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-2.png" alt="">
</div>
<div class="content">
<h3 class="frontend-title">Frontend Dev</h3>
<p>Discover The Complete Range Of Frontend Solutions.</p>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-3.png" alt="">
</div>
<div class="content">
<h3>Microsoft systems</h3>
<p>Discover The Complete Range Of Microsoft Solutions.</p>
</div>
</div>
</div>
</section>
<section class="quote-section">
<div class="quote-container">
<div class="quote">"</div>
<p class="p-quote">In coded, the progress of the topics and the exercises are really good. It's so nice to practice on good story told tasks. Also if you are stuck, it is nice to have a broad range of coders around in the peer groups that you can get the answers you are looking for.</p>
<div class="quote-img">
<img src="./Resources/Images/person-img.png" alt="">
</div>
<div class="person-name">Peter Gangland </div>
<div class="person-role">Director of business dev at <span>Microsoft</span></div>
</div>
</section>
<footer>
<div id="contact">
<h2>
Contact us</h5>
<h5>coded@peers.com</h5>
<h5>831-867-5309</h5>
</div>
<div id="copyright">
<h5>@copyright coded Enterprises 2022</h5>
</div>
</footer>
</body>
</html>
要使您的网站响应迅速，您需要使用 media queries。这就像您告诉浏览器如何为您的网站设置不同尺寸的样式。我认为如果您尝试使您的网站具有响应性，您的版块问题也可能会得到解决。
我注意到的一些问题：
网页加载后缩小屏幕宽度时打开水平滚动条；这种情况不适合响应式设计。为了避免这种情况，在我用的
<body>样式中加上overflow-x: hidden。您应该使用媒体查询来制作移动响应式网站。在此示例中，我编辑了
<img>元素以在页面缩小时将其删除。我完全删除了您添加到元素中的
width: 1100px样式。您不需要使用此类型来为元素提供宽度。在移动响应网站上，
<img>个元素在新行上以100%宽度显示；你可以在这个阶段通过使用媒体查询来实现这个想法。
您可以根据CSS中设备的显示大小访问this link媒体查询块。
例如，当页面大小低于 880px:
@media only screen and (max-width: 880px){} 中的样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: black;
color: white;
line-height: 30px;
width:100%;
overflow-x: hidden;
}
img {
width: 100%;
}
h1 {
font-weight: 700;
font-size: 44px;
margin-bottom: 40px;
line-height: 50px;
}
h3 {
width: 100%;
}
header {
display: flex;
background-color: black;
height: 80px;
justify-content: right;
align-items: center;
margin-bottom: 50px;
border-bottom: 1px solid white;
}
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
}
.nav-links{
color: white;
font-size: 18px;
}
.banner {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 500px;
width: 100%;
}
.banner-text-container {
max-width: 30%;
font-size: 22px;
}
span {
color: #11cc9e;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 40%;
text-align: center;
padding: 5px;
}
.consultation-link:hover{
background-color: #fff;
}
.about {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 600px;
}
.about-text-container {
max-width: 40%;
font-size: 22px;
margin-left: 20px;
}
.about-img{
width: 400px;
margin-right: 22px;
}
.about-title {
margin-bottom: 40px;
width: 100% !important;
}
.about-us-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 25%;
padding: 5px;
}
.about-us-link:hover{
background-color: #fff;
}
.join {
/* */
}
.join-header{
width: 100%;
text-align: center;
margin-top: 75px;
font-size: 40px;
}
.container-boxes{
position: relative;
top: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
min-height: 500px;
}
.box {
position: relative;
overflow: hidden;
transition: 0.5s;
height: 200px;
width: 300px;
}
.box:hover{
z-index: 1;
transform: scale(1.25);
box-shadow: 0 25px 40px rgba(0, 0, 0, .5);
cursor: pointer;
}
.box .imgBX{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.box .imgBX:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(180deg,rgba(0,0,0.7),#79dbc3);
mix-blend-mode: multiply;
opacity: 0;
transition: 0.5s;
}
.box:hover .imgBX:before {
opacity: 1;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content{
display: flex;
flex-direction: column;
text-align: center;
position: absolute;
top: 20%;
bottom: 40%;
width: 100%;
height: 100%;
z-index: 1;
padding: 20px;
visibility: hidden;
}
.box:hover .content{
visibility: visible;
}
/* Quote section */
.quote-section {
display: flex;
justify-content: center;
max-width: 100%;
min-height: 500px;
}
.quote-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-items: center;
max-width: 50%;
font-size: 22px;
text-align: center;
}
.quote {
line-height: 90px;
font-size: 150px;
font-style: italic;
color: #11cc9e;
text-indent: -37px;
font-weight: 600;
width: 37px;
}
.quote-img{
width: 90px;
margin: 40px auto;
}
.person-name{
color: #ccc;
}
.person-role{
font-size: 17px;
color: #ccc;
}
footer {
text-align: center;
margin-top: 100px;
padding-top: 50px;
max-width: 100%;
min-height: 200px;
border-top: 1px solid #fff;
}
@media only screen and (max-width: 1279px) {
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
color: #11cc9e;
}
}
@media only screen and (max-width: 880px){
html{
margin-left: 25px !important;
margin-right: 25px !important;
}
.banner-text-container {
max-width: 100%;
font-size: 20px;
}
img{
display: none;
}
.about-text-container {
max-width: 100% !important;
font-size: 22px;
}
.about-text-container {
margin-left: 0px;
}
.about {
display: inline;
}
.banner {
display: inline;
justify-content: space-around;
width: 100%;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-bottom: 50px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 100%;
text-align: center;
padding: 5px;
}
.about-us-link {
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 100%;
padding: 5px;
}
.join{
display: none;
}
.join-header{
display: none;
}
.quote-section{
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codes</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<ink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- insert logo -->
<nav class="nav-links">
<ul>
<li>About</li>
<li>Peer group</li>
<li>Review</li>
</ul>
</nav>
</header>
<section class="banner">
<div class="banner-text-container">
<h1>Build. Grow. <span class="color-Learn">Learn.</span></h1>
<p>Unlock your potential with your peers!, using Blockchain, Fintech or the IT outsourcing company Boosty Labs helps you create an innovative end to end product or augment your team with the right experts.</p>
<a class="consultation-link" href="#">Free consultation </a>
</div>
<div class="banner-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
</section>
<section class="about">
<div class="about-text-container">
<h2 class="about-title">Who we are</h2>
<p>Here you can find our ,collection of coding, data science and statistics tutorials with examples in R, Python, JavaScript and Python. As you click through, you'll notice that some tutorials have ribbons on their logos - they are part of our free and self-paced online course Data Science for Ecologists and Environmental Scientists! Yellow for the Stats from Scratch stream, blue for Wiz of Data Viz and purple for Mastering Modelling.</p>
<a class="about-us-link" href="#">More about us </a>
</div>
<div class="about-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
</section>
<section class="join">
<h3 class="join-header" >Join a peer group!</h3>
<div class="container-boxes">
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3>AI</h3>
<P>Discover The Complete Range Of Artificial Intelligence Solutions.</P>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3 class="frontend-title">Frontend Dev</h3>
<p>Discover The Complete Range Of Frontend Solutions.</p>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3>Microsoft systems</h3>
<p>Discover The Complete Range Of Microsoft Solutions.</p>
</div>
</div>
</div>
</section>
<section class="quote-section">
<div class="quote-container">
<div class="quote">"</div>
<p class="p-quote">In coded, the progress of the topics and the exercises are really good. It's so nice to practice on good story told tasks. Also if you are stuck, it is nice to have a broad range of coders around in the peer groups that you can get the answers you are looking for.</p>
<div class="quote-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="person-name">Peter Gangland </div>
<div class="person-role">Director of business dev at <span>Microsoft</span></div>
</div>
</section>
<footer>
<div id="contact">
<h2>
Contact us</h5>
<h5>coded@peers.com</h5>
<h5>831-867-5309</h5>
</div>
<div id="copyright">
<h5>@copyright coded Enterprises 2022</h5>
</div>
</footer>
</body>
</html>