Question

我正在努力教自己响应式网页设计，但我根本不明白我该如何做到这一点-.-

当我的浏览器宽度为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％，则会垂直显示：

容器：

由于这是一个引导程序，大多数响应已经在运行，并且一切都在使用媒体查询。

Answer 1

修改

您所要做的就是将子容器的宽度设置为width: 33.33%。并将.row-circles的宽度设置为max-width，使其根据视图端口减小，但如果视口大小超过该值，则始终保持在1263px范围内。

我忘了说的一件事是never write repetitive code如果不同的元素（类ID等）使用相同的属性然后将它们放在同一个类下，或者像我下面那样将它们组合在一起。

.row-circles { box-sizing: border-box; color: rgb(90, 90, 90); display: block; font-size: 18px; height: 450px; line-height: 40px; position: relative; max-width: 1263px; /* new */ margin: 0 auto; } .steve1, .steve2, .quentin { box-sizing: border-box; color: rgb(90, 90, 90); display: block; float: left; font-size: 100%; height: 406px; line-height: 40px; margin-bottom: 20px; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; text-align: center; width: 33.3%; /* new */ } .steve1 h2, .steve2 h2, .quentin h2 { margin-top: 20px; margin-bottom: 10px; letter-spacing: 1px; } .quentin p, .steve p, .quentin p { margin-top: -20px; margin-bottom: 10px; letter-spacing: 1px; } /*NEW*/ img.img-circle { min-width: 50px;/*NEW*/ max-width: 140px;/*NEW*/ width: 100%;/*NEW*/ box-sizing: border-box; vertical-align: middle; border-radius: 50%; border: 0; 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-style: none; border-top-width: 0px; box-sizing: border-box; color: rgb(90, 90, 90); display: inline; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; } /* Deleted img .img-circle { ..... /*Deleted/* } */ .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>

Answer 2

如果您的目标（如上所述）保持史蒂夫，史蒂夫和昆汀总是并排，无论屏幕大小如何，这里都是css :(我已经为steve1，steve2组合了规则和昆汀因为它们完全相同）

查看codepen：http://codepen.io/anon/pen/jWMeKg

.row-circles {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    font-size: 18px;
    height: 450px;
    line-height: 40px;
    position: relative;
    width:100%; 
    max-width:1263px; 
    margin: 0 auto;

}
.steve1, .steve2, .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: 33%;
}
.quentin h2, .steve1 h2, .steve2 h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.quentin p, .steve1 p, .steve2 p {
    margin-top: -20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

如果您需要为不同的屏幕更改此样式的某些方面（例如，您可能需要在较小的屏幕，字体大小等上编辑部分的高度），那么您可以包装这些差异在@media规则中。 - 就个人而言，我会从你希望事物出现在最小屏幕上的方式开始，然后在屏幕尺寸增加时使用最小宽度规则来改变事物。例如：

/* rules that apply to everything */
.steve1, .steve2, .quentin {
    box-sizing: border-box;
    color: rgb(90, 90, 90);
    display: block;
    float: left;
    font-size: 12px; 
    height: auto;
    line-height: 40px;
    margin-bottom: 20px;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    text-align: center;
    width: 33%;
 }

/* example rule that changes based on screen size */
@media screen and (min-width: 960px) {
.steve1, .steve2, .quentin {
    font-size:18px;
    height:406px;
  }
}

响应式网页设计 - @media屏幕指导

2 个答案: