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

Question

我在创建第一个移动视图然后想添加桌面时遇到问题，iPad，等等...但是当我为“桌面视图”添加媒体查询时（比如我想相信）”它会影响移动视图的外观。我该怎么做才能为桌面视图设置断点，但不会影响移动设备、屏幕宽度和 iPad。 *Link 完整代码：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 */

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

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

desktop media query affects the mobile view

html

css

media-queries

responsive-design