Question

我在使此部分响应时遇到问题，无法找到合适的解决方案。如你所见，我正在使用Bootstrap，我给四个大正方形中的每一个都给出了584px的高度和宽度（因为我剪切了我的照片以适应这种设计）。一切都在宽度超过1200px时工作正常，但对于宽度低于1200px，设计会分崩离析。我以某种方式设法使它在360px和480px下工作，但对于1200px之间和之下的其他宽度，我的设计看起来并不好（正如你可以在下面的照片上看到的那样，在1183px的屏幕截图）。我试图给百分比至少把所有内容都集中在一起，但都没有成功。不确定我是否决定将584px的高度和宽度放到大方块上是一个好主意，但是如果有人能帮助我让它看起来对于1200px以下的所有分辨率看起来都不错，那真的会让我头疼不已。感谢大家的阅读和帮助！

以下是我的设计在1200px以上的样子的截图，并且没问题：

这是在1200px以下（它没有居中，坚持左侧）：

低于480px（超出屏幕宽度）：

这是我的HTML：

<!-- S Q U A R E S   S E C T I O N -->
<section id="squares">
    <div class="container">

        <div class="row squares">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 box-one no-padding">
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box">
                    <img src="img/squares/teacup.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box border-0">
                    <img class="icon" alt="" src="img/icons/1.png">
                    <h3>TEA POT</h3>
                    <p>A teapot is a vessel used for steeping tea leaves or an herbal mix in boiling or near-boiling water, and for serving the resulting infusion which is called tea. It makes the difference between good and great tea.
                    </p>
                    <p class="hide-text">Teapots usually have an opening with a lid at their top, where the dry tea and hot water are added, a handle for holding by hand and a spout through which the tea is served.
                    </p>
                    <p class="hide-text">The teapot was invented in China during the Yuan Dynasty. The size reflects the importance of serving single portions so that the flavours can be better concentrated and controlled, then repeated.</p>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 box-two no-padding">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box-small">
                        <img src="img/squares/greentea.jpg" class="img-responsive" alt="">
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box-small border-1">
                        <img class="icon" alt="" src="img/icons/2.png">
                        <h3>TEA BAG</h3>
                        <p>A small, porous, sealed bag containing tea, which is immersed in boiling water to make a hot drink.</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box-small-1">
                        <img class="icon" alt="" src="img/icons/3.png">
                        <h3>MATCHA</h3>
                        <p>A finely ground powder of specially grown and processed green tea.</p>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box-small">
                        <img src="img/squares/matcha.jpg" class="img-responsive" alt="">
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 box-two no-padding">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box-small">
                        <img class="icon" alt="" src="img/icons/4.png">
                        <h3>TEA GLASS</h3>
                        <p>Did you know that hot tea tastes better in a glass cup?</p>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box-small">
                        <img src="img/squares/blacktea.jpg" class="img-responsive" alt="">
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box-small">
                        <img src="img/squares/loosetea.jpg" class="img-responsive" alt="">
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box-small border-2">
                        <img class="icon" alt="" src="img/icons/5.png">
                        <h3>TEA KETTLE</h3>
                        <p>A type of pot, typically metal, specialized for boiling water, with a lid, spout and handle.</p>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 box-one no-padding">
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 photo-box">
                    <img src="img/squares/teavariety.jpg" class="img-responsive" alt="">
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center text-box">
                    <img class="icon" alt="" src="img/icons/6.png">
                    <h3>TEA MUG</h3>
                    <p>A type of cup typically used for drinking hot beverages. Mugs usually have handles and hold a larger amount of fluid than other types of cup.</p>
                    <p>A mug is a less formal style of drink container and is not usually used in formal place settings, where a teacup or coffee cup is preferred.</p>
                    <p class="hide-text">A travel mug is insulated and has a cover with a small sipping opening to prevent spills.</p>
                </div>
            </div>

        </div>

    </div>
</section>

这是我的CSS：

/* -------- SQUARES SECTION -------- */
#squares{
    height: auto;
    width: 100vw;
    background: #fff;
}
.squares{
    margin-top: 50px;
    margin-bottom: 100px;
}
.box-one{
    height: 584px;
    width: 584px;
    padding: 0;
}
.photo-box{
    height: 584px;
    width: 50%;
    padding:0;
}
.text-box{
    height: 584px;
    width: 50%;
    background: #f8f8f8;
}
.box-two{
    height: 584px;
    width: 584px;
    margin: 0;
}
.photo-box-small{
    height: 292px;
    width: 292px;
    padding:0;
    float: left;
}
.text-box-small{
    height: 292px;
    width: 292px;
    background: #f8f8f8;
}
.text-box-small-1{
    height: 292px;
    width: 292px;
    background: #f8f8f8; /* Or #f5f5f5 */
    border-left: 1px dashed #ccc;
}
@media (max-width: 768px){
    .text-box-small-1{
        border-left: none;
        border-bottom: 1px dashed #ccc;
    }
    h3{
        font-size: 18px;
    }
}
.icon{
    height: 64px;
    width: 64px;
    margin-top: 32px;
}

@media (width: 768px){
    #squares .container{
    padding-left: 97px;
    }
    .border-1{
        border-top: 1px dashed #ccc;
    }
    .border-2{
        border-bottom: 1px dashed #ccc;
    }
    .icon{
    height: 32px;
    width: 32px;
    margin-top: 24px;
    }
}

@media (width: 480px){
     .squares{
    margin-top: 0px;
    margin-bottom: 0px;
    }
    .border-0{
        border-top: 1px dashed #ccc;
    }
     .border-1{
        border-top: 1px dashed #ccc;
    }
    .border-2{
        border-bottom: 1px dashed #ccc;
    }
    .box-one{
    height: 480px;
    width: 480px;
    padding: 0;
    }
    .photo-box{
        height: 480px;
        width: 50%;
        padding:0;
    }
    .text-box{
        height: 480px;
        width: 50%;
        background: #fff;
    }
    .hide-text{
        display: none;
    }
    .box-two{
        height: 480px;
        width: 480px;
        margin: 0;
    }
    .photo-box-small{
        height: 240px;
        width: 240px;
        padding:0;
        float: left;
    }
    .text-box-small{
        height: 240px;
        width: 240px;
        background: #fff;
    }
    .text-box-small-1{
    height: 240px;
    width: 240px;
    background: #fff; /* Or #f5f5f5 */
    border-left: none;
    }
    .icon{
    height: 32px;
    width: 32px;
    margin-top: 24px;
    }
}

@media (max-width: 360px){
    .squares{
    margin-top: 50px;
    margin-bottom: 0px;
    }
    .border-0{
        border-top: 1px dashed #ccc;
    }
     .border-1{
        border-top: 1px dashed #ccc;
    }
    .border-2{
        border-bottom: 1px dashed #ccc;
    }
    .box-one{
    height: 360px;
    width: 360px;
    padding: 0;
    }
    .photo-box{
        height: 360px;
        width: 50%;
        padding:0;
    }
    .text-box{
        height: 360px;
        width: 50%;
        background: #fff;
    }
    .hide-text{
        display: none;
    }
    .box-two{
        height: 360px;
        width: 360px;
        margin: 0;
    }
    .photo-box-small{
        height: 180px;
        width: 180px;
        padding:0;
        float: left;
    }
    .text-box-small{
        height: 180px;
        width: 180px;
        background: #fff;
    }
    .text-box-small-1{
    height: 180px;
    width: 180px;
    background: #fff; /* Or #f5f5f5 */
    border-left: none;
    }
    p {
        font-size: 12px;
    }
    .icon{
    height: 32px;
    width: 32px;
    margin-top: 16px;
    }
}

如何使大方块响应宽度低于1200px？

0 个答案: