出于某种原因，我的媒体查询改变了我原来的移动优先设计

Question

我在这个响应式网站上工作(hosted site). If you use the inspect tool, it looks fine on desktop/tablet versions, but on the mobile version, the sections are still next to each other. I made this mobile-first so the media query shouldn't have affected the mobile version. To be even more clear the mobile version should look like this

我在 github 上发布了代码，但我认为相关代码是：

@media (min-width: 600px) {
    .authentic {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        grid-template-areas: 'bowl content';
        height: 100%;
        margin: 0px;
    }

    .right-col {
        grid-area: content;
        padding: 0 10%;
        text-align: left;
        align-self: center;
    }
img {
    grid-area: bowl;
    object-fit: cover;
    height: 50vh;

  }
}

我是堆栈溢出的新手，所以如果我遗漏了什么，请告诉我。泰！

Answer 1

您的 html

元素中似乎缺少视口元标记

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

Answer 2

您需要告诉浏览器将页面宽度设置为跟随设备的屏幕宽度，并在 index.html:

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

出于某种原因，我的媒体查询改变了我原来的移动优先设计

For some reason my media query switched my original mobile-first design

html

css

responsive-design

responsive