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

Question

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

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

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

Answer 1

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

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

Answer 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 */

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