桌面媒體查詢影響移動視圖

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

所以回顧一下，我首先會根據桌面視圖制作您的頁面，一旦您對這種感覺感到滿意，您就可以開始調整瀏覽器的大小並實施媒體查詢以相應地調整您的內容。