Question

页面上用于显示不同视口大小的网格元素的CSS 用于根据视口大小显示网格及其后代的代码。如果屏幕的大小变小，那么根据屏幕的大小，列应该下降并在移动模式下为每个容器获取单行。在平板电脑模式下，主要和侧边栏应从第2行下降到第3行。

body{
    margin: 0;
    padding: 0;
}

.gridContainer{
    display: grid;
    height: 100%;

    grid-template-columns: 20% 1em 1fr 1em 20% ;
        grid-template-rows:  4.4em 1em 1fr 1em 4.4em;
    grid-template-areas: "header header header header header"
        ". . . . ."
        "navigation . mainContent . sidebar"
        ". . . . ."
        "footer footer footer footer footer";
}
.gridHeader{
    grid-area: header;
    background-color: #A62E5C;
}

.gridFooter{
    grid-area: footer;
    background-color: #A62E5C;
}

.gridNav{
    grid-area: navigation;
    background-color: #9BC850;
}

.gridMain{
    grid-area: mainContent;
    background-color: #9BC850;
}

.gridSide{
    grid-area:  sidebar;
    background-color: #9BC850;
}

.grid-item {
    color: #fff;
    box-sizing: border-box;
    font-size: 1em;
    padding: 1em;
    overflow: hidden;
    text-align: center;
}

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

    .grid-container {
        grid: 1fr 1em 30% / 4.4em 1em 3.6em 1em 1fr 1em 4.4em;
        grid-template-areas:
        "header header header"
        ". . ."
        "navigation navigation navigation"
        ". . ."
        "content . sidebar"
        ". . ."
        "footer footer footer";
    }

}

@media screen and (max-width: 480px){
    .gridContainer{
        grid: 1fr / 3.6em 1em 4.6em 1em 1fr 1em 4.6em 1em 3.6em;
        grid-template-areas: "header"
            "."
            "navigation"
            "."
            "mainContent"
            "."
            "sidebar"
            "."
            "footer";
    }    
}

页面上用于显示不同视口大小的网格元素的HTML

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>
            Modern Web Layout
        </title>
        <link rel="stylesheet" href="css/main.css" type="text/css">
    </head>
    <body>
        <main class="gridContainer">
        <header class="gridHeader grid-item">
            HEADER
        </header>
            <section class="gridNav grid-item">
                NAVIGATION AREA
            </section>
            <section class="gridMain grid-item">
                MAIN CONTENT
            </section>
            <section class="gridSide grid-item">
                SIDEBAR
            </section>
            <footer class="gridFooter grid-item">
                FOOTER
            </footer>
        </main>
    </body>
</html>

请帮助.....提前致谢

Codepen

Answer 1

您使用.grid-container而不是.gridContainer进行平板电脑布局。

Answer 2

我昨天实际上遇到了这个问题，它非常简单，而不仅仅是@media screen @media only screen希望这对你有用！

媒体查询无法使用网格在响应式网页设计中工作

2 个答案: