出于某种原因，我的媒体查询切换了我原来的移动优先设计答案

【问题标题】：For some reason my media query switched my original mobile-first design出于某种原因，我的媒体查询切换了我原来的移动优先设计
【发布时间】：2020-05-23 15:28:20
【问题描述】：

我正在开发这个响应式网站(hosted site)。如果您使用检查工具，它在台式机/平板电脑版本上看起来不错，但在移动版本上，这些部分仍然彼此相邻。我做了这个移动优先，所以媒体查询不应该影响移动版本。为了更清楚，移动版本应该看起来像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;

  }
}

我是堆栈溢出的新手，所以如果我缺少任何东西，请告诉我。太棒了！

【问题讨论】：

标签： html css responsive-design responsive

【解决方案1】：

您需要告诉浏览器将页面宽度设置为跟随设备的屏幕宽度，并在 index.html 的头部使用类似这样的内容：

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

【讨论】：

哇，菜鸟错了哈哈。非常感谢！
我遇到了完全相同的问题。正如建议的那样，我添加了元标记，但它似乎弄乱了移动版的完整布局。我将尝试重新创建移动视图。
原来，它只是存储在“rem”中的值，似乎与“根”大小建立了新的相关性。因此，只有这些需要重新完成。

【解决方案2】：

您的 html 元素中似乎缺少 viewport 元标记

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

【讨论】：