CSS - 响应式设计

Question

我正在研究这个 WordPress 样式表。

下面的代码， 当我使用鼠标调整屏幕大小时，它会启动并显示响应能力。 但是，当我使用 Chrome 开发工具并单击每个不同的设备尺寸时，它不会启动。我还通过手机检查了这一点，它没有显示响应式设计。

我在这里做错了什么？

.specials{
    display: flex;
    //padding: 30px;
    text-align: center;

    @media screen and (max-width: 600px){
        flex-direction: column;
    }
    .content{
        width: 50%;
        padding: 30px;
        background-color: rgba($color: $primary, $alpha: 0.5);
        display: flex;
        flex-direction: column;
        justify-content: center;
        p{
            line-height: 30px;
        }

        @media screen and (max-width: 600px){
            width: 100%;
        }
    }

    .image{
        width: 50%;
        //padding: 30px;
        background-color: #000;
        img{
            max-width: 100%;
            height: auto;
        }

        @media screen and (max-width: 600px){
            width: 100%;
        }
    }
}

Answer 1

如果您的页面在浏览器的响应模式下渲染的东西太小，那么您可能忘记了视口元标记：

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

添加该选项将使您的网站以适合移动设备的尺寸呈现（包括桌面浏览器中响应模式模拟的网站）。