1
我想自學響應的網頁設計，但我完全不明白我怎麼能做到這一點-.-自適應設計 - @media屏幕指導
當我的瀏覽器是1200像素寬度以上，顯然我已經把它與其他所有東西一起放在中間，但是當我把它縮小時，這一行/部分不會修改它自己。我用@media屏幕等，但我不能讓它工作。有人能幫我讓這個工作嗎？
此行的代碼是：
.row-circles {
box-sizing: border-box;
color: rgb(90, 90, 90);
display: block;
font-size: 18px;
height: 450px;
line-height: 40px;
position: relative;
width: 1263px;
margin: 0 auto;
}
.steve1 {
box-sizing: border-box;
color: rgb(90, 90, 90);
display: block;
float: left;
font-size: 18px;
height: 406px;
line-height: 40px;
margin-bottom: 20px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
width: 390px;
}
.steve2 {
box-sizing: border-box;
color: rgb(90, 90, 90);
display: block;
float: left;
font-size: 18px;
height: 406px;
line-height: 40px;
margin-bottom: 20px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
width: 390px;
}
.quentin {
box-sizing: border-box;
color: rgb(90, 90, 90);
display: block;
float: left;
font-size: 18px;
height: 406px;
line-height: 40px;
margin-bottom: 20px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
width: 390px;
}
.quentin h2 {
margin-top: 20px;
margin-bottom: 10px;
letter-spacing: 1px;
}
.steve1 h2 {
margin-top: 20px;
margin-bottom: 10px;
letter-spacing: 1px;
}
.steve2 h2 {
margin-top: 20px;
margin-bottom: 10px;
letter-spacing: 1px;
}
.quentin p {
margin-top: -20px;
margin-bottom: 10px;
letter-spacing: 1px;
}
.steve1 p {
margin-top: -20px;
margin-bottom: 10px;
letter-spacing: 1px;
}
.steve2 p {
margin-top: -20px;
margin-bottom: 10px;
letter-spacing: 1px;
}
.img-circle {
border-bottom-color: rgb(90, 90, 90);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(90, 90, 90);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(90, 90, 90);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(90, 90, 90);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(90, 90, 90);
display: inline;
font-size: 14px;
height: 140px;
line-height: 20px;
text-align: center;
vertical-align: middle;
width: 140px;
}
.img-circle img {
width: 140px;
height: 140px;
box-sizing: border-box;
vertical-align: middle;
border-radius: 50%;
border: 0;
}
.circles h2 {
box-sizing: border-box;
color: rgb(90, 90, 90);
display: block;
font-size: 30px;
font-weight: normal;
height: 33px;
line-height: 33px;
margin-bottom: 10px;
margin-top: 20px;
text-align: center;
width: 456px;
}
.circles p {
box-sizing: border-box;
color: rgb(90, 90, 90);
display: block;
font-size: 14px;
height: 80px;
line-height: 20px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
text-align: center;
width: 436px;
}
a.btn.btn-default {
-webkit-user-select: none;
background-color: #83d3c9;
background-image: none;
border-bottom-color: rgb(204, 204, 204);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(204, 204, 204);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(204, 204, 204);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(204, 204, 204);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 200;
height: 34px;
line-height: 20px;
margin-bottom: 0px;
padding-bottom: 6px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
text-align: center;
text-decoration: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
width: 111.031px;
}<div class="width-container">
<div class="row-circles">
<div class="steve2">
<img class="img-circle" src="images/profile2.jpg" alt="Steven Scott" width="140" height="140">
<h2><strong>Steven Scott</strong></h2>
<p>Trade experience:
<br>20+ Years - Fitting & Machining.</p>
<br>
<p>
<a class="btn btn-default" href="#" role="button">Background »</a>
</p>
</div>
<div class="steve1">
<img class="img-circle" src="images/profile1.png" alt="Steven Muscat" width="140" height="140">
<h2><strong>Steven Muscat</strong></h2>
<p>Trade experience:
<br>20+ Years - Fitting & Machining.</p>
<br>
<p>
<a class="btn btn-default" href="#" role="button">Background »</a>
</p>
</div>
<div class="quentin">
<img class="img-circle" src="images/profile3.jpg" alt="Quentin Bailey" width="140" height="140">
<h2><strong>Quentin Bailey</strong></h2>
<p>Trade experience:
<br>4<sup>th</sup> Year Apprentice - Fitting & Machining.</p>
<br>
<p>
<a class="btn btn-default" href="#" role="button">Background »</a>
</p>
</div>
</div>
</div>如果我改變寬度爲100％時，垂直方向示出了：
集裝箱：
由於這是一個引導，大部分的反應是已經工作，一切正在使用媒體查詢。
也許試着設置寬度和高度？ –
是的，但如何？我不知道如何......：/ – wogwog
否:-(，somone很可能會很快得到解決方案，或者我會爲你開啓一個獎勵:-) –