桌面媒体查询影响移动视图答案

【问题标题】：desktop media query affects the mobile view桌面媒体查询影响移动视图
【发布时间】：2021-12-24 06:12:34
【问题描述】：

我有一个问题，我创建了第一个移动视图，然后想添加桌面、iPad 等...但是当我为“桌面视图（就像我想相信的那样）”添加媒体查询时影响移动视图的外观。我该怎么做才能为桌面视图设置断点，但不会影响移动设备、屏幕宽度和 iPad。 *完整代码链接：https://codepen.io/schoolcoder/pen/WNEgboE

.split {
    display: flex;
    @media screen only and (min-width:50em) {
    }
}

我还添加了一个屏幕截图；我想要的最终结果以及添加代码时得到的结果。如果有人有任何建议，我已经尝试了一百万种组合仍然无法正常工作......将不胜感激！

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

媒体查询需要封装它适用的规则，而不是相反。

@media screen only and (min-width: 50em) {
    .split {
        display: flex;
    }
}

【讨论】：

非常感谢，它成功了！再次感谢您:)

【解决方案2】：

您好，欢迎来到 Stack Overflow！

您可以正常使用 CSS 设置桌面屏幕样式，然后为移动视图添加媒体查询。

例如，这将是您桌面视图的 CSS。

.split {
   display: flex;
}

这将是您用于移动视图的 CSS。

/* I recommend using pixels instead of em */
/* This would be your view on any screen smaller than 850px i.e., most mobile devices */

@media only screen and (max-width: 850px) {
   .split {
     display: flex;
  }
}

/* you can also add multiple/different class styles under one media query. ex. */

@media only screen and (max-width: 850px) {
   .split {
     display: flex;
  }
   
   .classname {
     font-size: larger;
  }
} /* <-- just be sure to close your media query */

所以回顾一下，我会首先根据桌面视图制作您的页面，一旦您对这种感觉感到满意，您就可以开始调整浏览器的大小并实施媒体查询以相应地调整您的内容。

【讨论】：