css - 如何在不使用媒体查询的情况下将 div 定位为较低的分辨率

Question

我希望在不使用@media 查询的情况下以我绘制的方式定位 div(附图片)。这可能吗？第一张是全分辨率的，下一张是我们降低分辨率的，最后一张是分辨率非常小的——移动设备。 https://i.imgur.com/F4znkfC.png

Answer 1

检查一下，它符合您的要求 - https://codepen.io/behzad/pen/PbWZRd

HTML

    <div class="wrapper">
        <h1>Responsive Image Gallery</h1>
        <p>Without Media Queries</p>
        <div class="grid">
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=400" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=401" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=403" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=404" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=405" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=406" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=407" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=408" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=409" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=411" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
        </div>
    </div>

CSS

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

// Flexbox Grid
.grid{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    &-item{
        min-width: 250px;
        max-width: 250px;
        flex: 1 1 250px;
        padding-left: .5rem;
        padding-right: .5rem;
        margin-bottom: 1rem;
    }
}

// Styles
.wrapper{
    min-height: 100vh;
    padding: 2rem 0;
    background: #40424a;
    color: #e4e4e8;
    font-family: 'Roboto', sans-serif;
    text-align: center;

    h1{
        font-size: 2.125em;
        line-height: 1.5;
    }

    p{
        font-size: 1em;
        line-height: 1.5;
        margin-bottom: 1rem;
        color: #c4c4c8;
    }
}

.grid{
    &-item{
        figure{
            padding: 0;
            margin: 0;
            box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.05);

            img{
                display: block;
                max-width: 100%;
            }
        }

        figcaption{
            display: block;
            padding: .625rem .5rem;
            background: lighten(#40424a, 3%);
        }
    }
}