Question

我有这段代码，其中只有一列，其中三个不同的行适合视口。每行将包含一个根据高度适合的图像。我要这样做，以便如果浏览器水平调整大小，并且该列（视口）的宽度降到某个点以下，然后在也适合视口的页面上插入其他行。因此，根据一列/视口的宽度，它会从适合三行，适合四行，然后适合五行，依此类推：

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <title>TEST SITE ONE</title>
    <meta name="description" content="Test Site">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="main.css">

    <style>

        html {
          box-sizing: border-box;
        }

        *, *:before, *:after {
          box-sizing: inherit;
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        body{
        display: block;
        }

        #page1{
            background-color: aquamarine;
            display: block;
            width: 100vw;
            height: 100vh;
            max-width: 100%;
            max-height: 100%;
        }

        .grid-container{
            display: grid;
            height: 100%;
            grid-template-rows: repeat(3, 1fr);
        }

        .grid-items{
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid black;  
        }

        .slot-image{
            height: auto;
            width:auto;
            max-height: 100%;
            max-width: 100%;
        }

    </style>

</head>



<body> 
    <section id="page1">
        <div class="grid-container">
            <div class=grid-items>
                <img class="slot-image" src="WC%20Sov%20edit.png" alt="sov">
            </div>
            <div class=grid-items>image</div>
            <div class=grid-items>image</div>
        </div>

        <div class="grid-container">
            <div class=grid-items>
                <img class="slot-image" src="WC%20Sov%20edit.png" alt="sov">
            </div>
            <div class=grid-items>image</div>
            <div class=grid-items>image</div>
        </div>     
    </section>
</body>

</html>

Answer 1

我会将grid-template-rows: repeat(3, 1fr);的定义包装在@media queries中。您可以在其中定义min和max断点。

例如：

@media only screen and (max-width: 480px) { // Small Devices
    .grid-container{   
        grid-template-rows: repeat(3, 1fr); // 3 columns
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) { // Medium Devices
    .grid-container{   
        grid-template-rows: repeat(4, 1fr); // 4 columns
    }
}

@media only screen and (min-width: 769px) { // Large Devices
    .grid-container{   
        grid-template-rows: repeat(5, 1fr); // 5 columns
    }
}

根据列宽添加新的拟合行？

1 个答案: