我创建了一个带有容器类的 div，其中包含所有内容。然后我使用媒体查询并将宽度设置为 100% 到包含所有内容的容器。然而，出于某种原因，只有一个部分是响应的。
HTML:
<head>
<title>UI/UX Design Portfolio | Rafael Caba</title>
<link rel="shortcut icon" href="favicon.jpg">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="UI UX design, Visual Design, Web Design, HTML, CSS">
<meta name="description" content="UI UX Design Portfolio">
</head>
<div class="project4-container">
<section class="sketch">
<p class="sketch-text">Sketch<p>
<div>
<img src="http://i.imgur.com/TPtZjzl.jpg">
<img src="http://i.imgur.com/vl3WGnr.jpg">
</div>
</section>
<section class="userflows">
<p class="sketch-text">User Flows<p>
<div>
<img src="http://i.imgur.com/t6CS7cg.jpg">
<div style="margin-top:50px;"></div>
<img src="http://i.imgur.com/VW9ii4V.jpg">
</div>
</section>
<section class="wireframes">
<p class="wire-text">Wireframes</p>
<div>
<img src="http://i.imgur.com/2jRqo5V.jpg">
<img src="http://i.imgur.com/CnIv0Wq.jpg" class="project-margin">
<img src="http://i.imgur.com/JFi18km.jpg" class="project-margin">
<img src="http://i.imgur.com/L3SbBeg.jpg" class="project-margin">
<img src="http://i.imgur.com/WNxNxwn.jpg" class="project-margin">
<img src="http://i.imgur.com/pCfk4OZ.jpg" class="project-margin">
<img src="http://i.imgur.com/qmsAb5t.jpg" class="project-margin">
<img src="http://i.imgur.com/wdL5nhH.jpg" class="project-margin">
<img src="http://i.imgur.com/emCHs7V.jpg" class="project-margin">
<img src="http://i.imgur.com/SNCVpUf.jpg" class="project-margin">
<div class="space"></div>
</div>
</section>
<section class="project4">
<p class="mock-text">Mockups</p>
<div>
<img src="http://i.imgur.com/V4a8F0w.jpg">
<img src="http://i.imgur.com/u6xRuKS.jpg" class="project-margin">
<img src="http://i.imgur.com/wpNgzza.jpg" class="project-margin">
<img src="http://i.imgur.com/N3u07hA.jpg" class="project-margin">
<img src="http://i.imgur.com/l5vVy09.jpg" class="project-margin">
<a href="#top" class="top-page">Back to top of page</a>
<div class="space"></div>
</div>
</section>
</div>
CSS:
@media screen and (max-width:640px){
div.headertitle{
width:100%;
}
nav ul{
width:99%;
}
nav ul li{
padding-right:0;
margin-left:5.5%;
}
.projects{
width:100%;
}
section.sketch{
width:100%;
}
section.sketch img{
width:100%;
margin:0;
}
section.sketch p{
margin-left:0;
}
section.sketch-mobile{
width:100%;
}
section.sketch-mobile img{
width:100%;
margin:0;
}
section.sketch-mobile p{
margin-left:23px;
}
.about-section{
width:90%;
}
.about-section p{
width:100%;
margin-top:10%;
}
.about-section img{
width:90%;
margin:0 auto;
margin-top:15%;
}
.project4-container{
width:100%;
background-color:red;
}
}
jsfiddle - https://jsfiddle.net/qdhcnpq0/
最佳答案
关于html - 试图让容器 div 中的所有内容响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36106433/