每次我要缩小浏览器窗口时都会出现重叠，因此该页面在移动设备上看起来很糟糕。我尝试将宽度设置为百分比，并且将重叠元素的显示属性设置为“阻止”，但问题仍然不会消失。无论我做什么，.third-div-welcome-section元素仍然被#projects覆盖，并且元素.second-div-welcome-section中的文本超出了其容器的范围。
#welcome-section {
position: relative;
top: 50px;
margin: 30px;
height: 580px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.first-div-welcome-section {
background-color: rgba(255, 255, 204, 0.7);
border-radius: 30px;
padding: 30px;
display: block;
height: 110%;
width: 25%;
}
.second-div-welcome-section {
background-color: rgba(255, 255, 204, 0.7);
border-radius: 30px;
padding: 30px;
display: block;
margin-left: 30px;
width: 25%;
height: 110%;
}
.third-div-welcome-section {
background-color: rgba(255, 255, 204, 0.7);
border-radius: 30px;
padding: 30px;
display: block;
margin-left: 30px;
width: 25%;
height: 110%;
}
#projects {
background-color: #006400;
background-image: linear-gradient(to bottom, rgba(0, 133, 20, 1), rgba(39, 225, 20, 1));
color: white;
transform: translate(0, 60%);
padding: 30px;
width: 100%;
height: 240px;
display: inline-block;
}
#projects h1 {
text-align: center;
}
.project-tile {
display: block;
float: left;
text-decoration: none;
color: black;
font-weight: bold;
margin-left: 25px;
}
.project-tile:hover {
border: 3px solid blue;
background-color: blue;
color: white;
text-decoration: none;
}<section id="welcome-section">
<div class="first-div-welcome-section">
<img src="pics/me.jpg" alt="mypic" width="230px" height="290px">
<h1>Hi. I'm Cristian Antonescu.</h1>
<p><i class="fa fa-briefcase"></i> Front-end web developer</p>
<p><i class="fa fa-home"></i> Romania, Marasesti city</p>
<p><i class="fa fa-envelope"></i> cristian_antonescu1992@yahoo.com</p>
</div>
<div class="second-div-welcome-section">
<h3><i class="fa fa-drivers-license" style="font-size:24px"></i> Skills:</h3>
<ul>
<li>JavaScript</li>
<li>CSS3</li>
<li>HTML5</li>
<li>jQuery</li>
<li>Never ending ambition</li>
</ul>
<h3><i class="fa fa-anchor" style="font-size:24px"></i> My Journey:</h3>
<p>I began my web development journey mostly as a self-taught who has been learning the basics of HTML and CSS from <a href="http://w3schools.com">w3schools</a> and <a href="http://freecodecamp.com">freeCodeCamp</a> . I also participated in a online
course where I improved a lot my web development skills, entering the wonderful realm of JavaScript.</p>
<p>What motivated me? My main motivation was and still is to create useful and well-designed webpages and apps which can improve and entertain peoples' lives, although I have to admit that I started to learn HTML not having any idea about how much beauty
and addiction it can bring into my life. It was more like "Well I have some working neurons in my head, what can I do with them? Let's try programming and see where it goes!"</p>
</div>
<div class="third-div-welcome-section">
<h3><i class="fa fa-graduation-cap" style="font-size:24px"></i> Education:</h3>
<h5 class="w3-opacity"><b>Front End Developer / w3schools.com:</b></h5>
<p class="w3-text-teal"><i class="fa fa-calendar"></i> Jan 2016 - <span>Current</span></p>
<p>There's a never ending phase when it comes to learning programming! I'm always eager to improve my skills!</p>
<h5 class="w3-opacity"><b>Front End Developer / freeCodeCamp.com:</b></h5>
<p class="w3-text-teal"><i class="fa fa-calendar"></i> Feb 2017 - <span>Current</span></p>
<p>I've done a lot of the demanded projects and exercises available on freeCodeCamp!</p>
</div>
</section>
<section id="projects">
<h1 class="some-heading">Check out some of my work:</h1>
<a href="https://github.com/cristopher927/motivational-web-app" class="project-tile" target="_blank">
<img src="pics/quote-generator.jpg" alt="quote generator app pic" width="180px" height="155px"><br>Quote generator app
</a>
<a href="https://github.com/cristopher927/technical-documentation-page-about-JavaScript" class="project-tile" target="_blank">
<img src="pics/documentation_page.png" alt="documentation page pic" width="250px" height="155px"><br>Documentation page about JavaScript
</a>
<a href="https://github.com/cristopher927/tribute-page-to-Max-Tegmark" class="project-tile" target="_blank">
<img src="pics/tegmark.png" alt="tribute-page-to-Max-Tegmark pic" width="250px" height="155px"><br>Tribute page to Max Tegmark
</a>
<a href="https://github.com/cristopher927/Survey-about-the-web" class="project-tile" target="_blank">
<img src="pics/web.png" alt="Survey about the web pic" width="250px" height="155px"><br>Survey about the web
</a>
</section>
答案 0 :(得分：1)
改善移动设备外观的最简单方法是通过CSS3 @media query。这样，您就可以为特定的设备尺寸（在下面的示例中，低于iPad纵向宽度或768px宽度的任何物体）设置特定于移动设备的CSS。
我已经注释掉了一些不需要的固定宽度/高度（这使浏览器可以根据需要扩展内容，而不会显示过多的空间或剪切内容）。 @media查询使用flex-direction将第一行更改为一列，并对各个面板的margin设置进行了一些细微调整。
希望这可以帮助您开始针对移动设备优化网站！
#welcome-section {
position: relative;
top: 50px;
margin: 30px;
/*height: 580px;*/
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.first-div-welcome-section {
background-color: rgba(255, 255, 204, 0.7);
border-radius: 30px;
padding: 30px;
display: block;
/*height: 110%;
width: 25%;*/
}
.second-div-welcome-section {
background-color: rgba(255, 255, 204, 0.7);
border-radius: 30px;
padding: 30px;
display: block;
margin-left: 30px;
/*width: 25%;
height: 110%;*/
}
.third-div-welcome-section {
background-color: rgba(255, 255, 204, 0.7);
border-radius: 30px;
padding: 30px;
display: block;
margin-left: 30px;
/*width: 25%;
height: 110%;*/
}
#projects {
background-color: #006400;
background-image: linear-gradient(to bottom, rgba(0, 133, 20, 1), rgba(39, 225, 20, 1));
color: white;
transform: translate(0, 60%);
padding: 30px;
width: 100%;
height: 240px;
display: inline-block;
}
#projects h1 {
text-align: center;
}
.project-tile {
display: block;
float: left;
text-decoration: none;
color: black;
font-weight: bold;
margin-left: 25px;
}
.project-tile:hover {
border:3px solid blue;
background-color: blue;
color: white;
text-decoration: none;
}
@media only screen and (max-width: 767px) {
#welcome-section {
flex-direction: column;
margin: 0;
}
.second-div-welcome-section,
.third-div-welcome-section {
margin-left: 0;
margin-top: 20px;
}
}<section id="welcome-section">
<div class="first-div-welcome-section">
<img src="pics/me.jpg" alt="mypic" width="230px" height="290px">
<h1>Hi. I'm Cristian Antonescu.</h1>
<p><i class="fa fa-briefcase"></i> Front-end web developer</p>
<p><i class="fa fa-home"></i> Romania, Marasesti city</p>
<p><i class="fa fa-envelope"></i> cristian_antonescu1992@yahoo.com</p>
</div>
<div class="second-div-welcome-section">
<h3><i class="fa fa-drivers-license" style="font-size:24px"></i> Skills:</h3>
<ul>
<li>JavaScript</li>
<li>CSS3</li>
<li>HTML5</li>
<li>jQuery</li>
<li>Never ending ambition</li>
</ul>
<h3><i class="fa fa-anchor" style="font-size:24px"></i> My Journey:</h3>
<p>I began my web development journey mostly as a self-taught who has been learning the basics of HTML and CSS from <a href="http://w3schools.com">w3schools</a> and <a href="http://freecodecamp.com">freeCodeCamp</a> . I also participated in a online course where I improved a lot my web development skills, entering the wonderful realm of JavaScript.</p>
<p>What motivated me? My main motivation was and still is to create useful and well-designed webpages and apps which can improve and entertain peoples' lives, although I have to admit that I started to learn HTML not having any idea about how much beauty and addiction it can bring into my life. It was more like "Well I have some working neurons in my head, what can I do with them? Let's try programming and see where it goes!"</p>
</div>
<div class="third-div-welcome-section">
<h3><i class="fa fa-graduation-cap" style="font-size:24px"></i> Education:</h3>
<h5 class="w3-opacity"><b>Front End Developer / w3schools.com:</b></h5>
<p class="w3-text-teal"><i class="fa fa-calendar"></i> Jan 2016 - <span>Current</span></p>
<p>There's a never ending phase when it comes to learning programming! I'm always eager to improve my skills!</p>
<h5 class="w3-opacity"><b>Front End Developer / freeCodeCamp.com:</b></h5>
<p class="w3-text-teal"><i class="fa fa-calendar"></i> Feb 2017 - <span>Current</span></p>
<p>I've done a lot of the demanded projects and exercises available on freeCodeCamp!</p>
</div>
</section>
<section id="projects">
<h1 class="some-heading">Check out some of my work:</h1>
<a href="https://github.com/cristopher927/motivational-web-app" class="project-tile" target="_blank">
<img src="pics/quote-generator.jpg" alt="quote generator app pic" width="180px" height="155px"><br>Quote generator app
</a>
<a href="https://github.com/cristopher927/technical-documentation-page-about-JavaScript" class="project-tile" target="_blank">
<img src="pics/documentation_page.png" alt="documentation page pic" width="250px" height="155px"><br>Documentation page about JavaScript
</a>
<a href="https://github.com/cristopher927/tribute-page-to-Max-Tegmark" class="project-tile" target="_blank">
<img src="pics/tegmark.png" alt="tribute-page-to-Max-Tegmark pic" width="250px" height="155px"><br>Tribute page to Max Tegmark
</a>
<a href="https://github.com/cristopher927/Survey-about-the-web" class="project-tile" target="_blank">
<img src="pics/web.png" alt="Survey about the web pic" width="250px" height="155px"><br>Survey about the web
</a>
</section>