移动响应css无法正常工作的问题[重复]答案

【问题标题】：Issue with mobile responsive css not working [duplicate]移动响应css无法正常工作的问题[重复]
【发布时间】：2020-06-28 02:15:05
【问题描述】：

谁能帮我解决这个问题，我定义了一个 css 网格，当调用 min-width 时它可以在 768px 以上工作，但是当我缩放到低于它时它保持相同的格式并且媒体标签似乎没有生效.如果我将 min-width 更改为 max-width，那么我会在 768px 以下得到正确的格式，但在 768px 以上时不会得到正确的格式

HTML

 <html>
        <head>
            <title>Responsive Design with CSS Media Queries</title>
            <link rel='stylesheet' href='style.css'/>
        </head>
        <body>
            <div class="grid-container">
                <div class="grid-item-1"></div>
                <div class="grid-item-2"></div>
                <div class="grid-item-2"></div>
                <div class="grid-item-2"></div>
                <div class="grid-item-2"></div>
                <div class="grid-item-3"></div>
                <div class="grid-item-4"></div>
                <div class="grid-item-5"></div>
                <div class="grid-item-6"></div>
            </div>
        </body>
    </html>

CSS

    *{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-weight: lighter;
}

@media (min-width: 769px) and (max-width: 1920px){
    .grid-container{
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 3px 3px;
    }
    
    .grid-item-1{
        height: 100px;
        background-color: #F5C6D6;
        grid-column: 1/5;
    }
    .grid-item-2{
        height: 100px;
        background-color: #EE2E84;
    }
    .grid-item-3{
        height: 100px;
        background-color: #85CFD8;
        grid-column: 1/3;
    }
    .grid-item-4{
        height: 100px;
        background-color: #85CFD8;
        grid-column: 3/5;
    }
    .grid-item-5{
        height: 100px;
        background-color: #8DC63F;
        grid-column: 1/4;
    }
    .grid-item-6{
        height: 100px;
        background-color: #E76E34;
    }
}

@media only screen and (max-width: 768px){
    .grid-container{
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 3px 3px;
    }
    .grid-item-1{
        height: 100px;
        background-color: #F5C6D6;
        grid-column: 1/2;
    }
    .grid-item-2{
        height: 100px;
        background-color: #EE2E84;
        grid-column: 1/2;
    }
    .grid-item-3{
        height: 100px;
        background-color: #85CFD8;
        grid-column: 1/2;
    }
    .grid-item-4{
        height: 100px;
        background-color: #85CFD8;
        grid-column: 1/2;
    }
    .grid-item-5{
        height: 100px;
        background-color: #8DC63F;
        grid-column: 1/2;
    }
    .grid-item-6{
        height: 100px;
        background-color: #E76E34;
        grid-column: 1/2;
    }
}

【问题讨论】：

标签： html css

【解决方案1】：

我猜这个问题是因为你没有提供元标记-

尝试包括 -

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在 head 标签中包含这个。

【讨论】：