Question

我有一个网格布局，有7列和5行，由以下CSS定义：

.container {

    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100vw;
    height: 100vh;

}

我必须重新排列其单元格以用于移动版本，如果我具有相同数量的单元格，则可以通过任何简单的CSS技巧（无需更改JavaScript代码）（请参见随附的代码段）来完成，在此我为移动设备重新设计了布局并放下LF / RF电池。

但是，如果我不能保持相同数量的细胞怎么办？

如果，桌面网格将具有额外的4个偏移单元（洋红色）

因此，如果它们的单元格数不相同，但网格和行数相同，则可以在桌面和移动版式之间切换。无需使用JavaScript，只需HTML / CSS堆栈即可。

     
    body {margin: 0; }
    .container {
        
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        width: 100vw;
        height: 100vh;
        
    }

    /*desktop*/
    .l1 { grid-area: 1 / 1 / 2 / 3; background-color: aqua; }
    .c1 { grid-area: 1 / 3 / 2 / 6; background-color: aquamarine; }
    .r1 { grid-area: 1 / 6 / 2 / 8; background-color: aqua; }
    .ltotal { grid-area: 2 / 1 / 3 / 4; background-color:burlywood; }
    .c2{ grid-area: 2 / 4 / 3 / 5; background-color: darkgray; }
    .rtotal { grid-area: 2 / 5 / 3 / 8; background-color:burlywood; }
    .lf { grid-area: 3 / 1 / 4 / 2; background-color: brown; }
    .d3 { grid-area: 3 / 2 / 4 / 7; background-color: cadetblue; }
    .rf { grid-area: 3 / 7 / 4 / 8; background-color: blueviolet; }
    .lui { grid-area: 4 / 1 / 5 / 4; background-color: aqua; }
    .cui { grid-area: 4 / 4 / 5 / 5; background-color: aquamarine; }
    .rui { grid-area: 4 / 5 / 5 / 8; background-color: aqua; }
    .pholder { grid-area: 5 / 1 / 6 / 8; background-color: darkgray; }

    @media only screen and (max-width: 600px) {

        .l1 { grid-area: 1 / 1 / 2 / 3; }
        .c1 { grid-area: 1 / 3 / 2 / 6; }
        .r1 { grid-area: 1 / 6 / 2 / 8; }
        .ltotal { grid-area: 2 / 1 / 3 / 4; }
        .c2 { grid-area: 2 / 4 / 3 / 5; }
        .rtotal { grid-area: 2 / 5 / 3 / 8; }
        .d3 { grid-area: 3 / 1 / 4 / 8; }
        .lui { grid-area: 4 / 1 / 5 / 4; }
        .cui { grid-area: 4 / 4 / 5 / 5; }
        .rui { grid-area: 4 / 5 / 5 / 8; }
        .lf { grid-area: 5 / 1 / 6 / 4; }
        .pholder { grid-area: 5 / 4 / 6 / 5; }
        .rf { grid-area: 5 / 5 / 6 / 8; }
        
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Desktop vs. Mobile Grid</title>
</head>
<body>

<div class="container">
    <div class="l1">L1</div>
    <div class="c1">C1</div>
    <div class="r1">R1</div>
    <div class="ltotal">LTOTAL</div>
    <div class="c2">C2</div>
    <div class="rtotal">RTOTAL</div>
    <div class="lf">LF</div>
    <div class="d3">D3</div>
    <div class="rf">RF</div>
    <div class="lui">LUI</div>
    <div class="cui">CUI</div>
    <div class="rui">RUI</div>
    <div class="pholder">PHOLDER</div>
</div>
    
</body>
</html

Answer 1

当然，我必须通过

隐藏额外的桌面单元

    
    body {margin: 0; }
    .container {
        
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        width: 100vw;
        height: 100vh;
        
    }

    /*desktop*/  
    .l1 { grid-area: 1 / 1 / 2 / 3; background-color: aqua; }
    .c1 { grid-area: 1 / 3 / 2 / 6; background-color: aquamarine; }
    .r1 { grid-area: 1 / 6 / 2 / 8; background-color: aqua; }
    .desk1 { grid-area: 2 / 1 / 3 / 2; background-color: orange; }
    .ltotal { grid-area: 2 / 2 / 3 / 4; background-color:burlywood; }
    .c2 { grid-area: 2 / 4 / 3 / 5; background-color: darkgray; }
    .rtotal { grid-area: 2 / 5 / 3 / 7; background-color:burlywood; }
    .desk2 { grid-area: 2 / 7 / 3 / 8; background-color: orange; }
    .lf { grid-area: 3 / 1 / 4 / 2;  background-color: brown; }
    .d3 { grid-area: 3 / 2 / 4 / 7; background-color: cadetblue; }
    .rf { grid-area: 3 / 7 / 4 / 8; background-color: blueviolet;}
    .desk3 { grid-area: 4 / 1 / 5 / 2; background-color: orange; }
    .lui { grid-area: 4 / 2 / 5 / 4; background-color: aqua; }
    .cui { grid-area: 4 / 4 / 5 / 5; background-color: aquamarine; }
    .rui { grid-area: 4 / 5 / 5 / 7; background-color: aqua; }
    .desk4 { grid-area: 4 / 7 / 5 / 8; background-color: orange; }
    .pholder { grid-area: 5 / 1 / 6 / 8; background-color: darkgrey; }

    @media only screen and (max-width: 600px) {

        .l1 { grid-area: 1 / 1 / 2 / 3; }
        .c1 { grid-area: 1 / 3 / 2 / 6; }
        .r1 { grid-area: 1 / 6 / 2 / 8; }
        .ltotal { grid-area: 2 / 1 / 3 / 4; }
        .c2 { grid-area: 2 / 4 / 3 / 5; }
        .rtotal { grid-area: 2 / 5 / 3 / 8; }
        .d3 { grid-area: 3 / 1 / 4 / 8; }
        .lui { grid-area: 4 / 1 / 5 / 4; }
        .cui { grid-area: 4 / 4 / 5 / 5; }
        .rui { grid-area: 4 / 5 / 5 / 8; }
        .lf { grid-area: 5 / 1 / 6 / 4; }
        .pholder { grid-area: 5 / 4 / 6 / 5; }
        .rf { grid-area: 5 / 5 / 6 / 8; }
        .desk1 { display: none; }
        .desk2 { display: none; }
        .desk3 { display: none; }
        .desk4 { display: none; }
        
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Desktop vs. Mobile Grid</title>
</head>
<body>

<div class="container">
    <div class="l1">L1</div>
    <div class="c1">C1</div>
    <div class="r1">R1</div>
    <div class="desk1"></div>
    <div class="ltotal">LTOTAL</div>
    <div class="c2">C2</div>
    <div class="rtotal">RTOTAL</div>
    <div class="desk2"></div>
    <div class="lf">LF</div>
    <div class="d3">D3</div>
    <div class="rf">RF</div>
    <div class="desk3"></div>
    <div class="lui">LUI</div>
    <div class="cui">CUI</div>
    <div class="rui">RUI</div>
    <div class="desk4"></div>
    <div class="pholder">PHOLDER</div>
</div>
    
</body>
</html

<!-- variable that stores the running row count in the master report -->
        <variable name="SubreportRowCount" class="java.lang.Integer" calculation="System">
            <initialValueExpression>0</initialValueExpression>
        </variable>
...
                <subreport>
...
<!-- pass the current value to the subreport -->
                    <subreportParameter name="InitialRowCount">
                        <subreportParameterExpression>$V{SubreportRowCount}</subreportParameterExpression>
                    </subreportParameter>
...
<!-- get back the updated value from the subreport -->
                    <returnValue subreportVariable="RunningRowCount" toVariable="SubreportRowCount"/>
    ...
                </subreport>

CSS桌面和移动版本的不同网格

1 个答案: