為什么我的媒體查詢不適用？

Question

我只是為電話顯示器編寫了一個媒體查詢，但沒有應用。 有問題的代碼如下。 為了獲得更好的上下文，我的github頁面在這里 。 我想要的是將食物圖片堆疊起來並占據屏幕的整個寬度，如底部的第一張圖片所示。

@media only screen and (max-width: 480px) {
  .food {
    height: 265px;
    width: 400px;
    padding: 0rem;
    position: relative;
    top: 7rem;
  }
}

調整桌面瀏覽器大小時，媒體查詢實際上顯示得有些適當（第一張圖片），但在iPhone 6上卻完全無法顯示（第二張圖片）-圖像兩側有相當大的空白，並且無法填滿屏幕。 我之所以說“有些正確”，是因為媒體查詢在桌面瀏覽器上應用的時間有很大的余量-當媒體查詢生效時，在調整瀏覽器大小時會看到它。 不知道為什么會這樣。 我有一個預感，與我的flexbox設置有關，但是我不確定。

這是我嘗試過的：

-使用<meta name="viewport" content="width=device-width,initial-scale=1">元標記

-將媒體查詢設置為縱向。

感謝您的任何幫助，您可以提供！

Answer 1

嘗試僅從您的媒體查詢中刪除，然后這樣寫：

@media screen and (max-width: 480px) {
}

另外max-width：480px，與iPhone 6屏幕尺寸不匹配。 有關實際屏幕尺寸，請參閱以下規格：

(min-width : 375px) // or 213.4375em or 3in or 9cm
(max-width : 667px) // or 41.6875em

Answer 2

您在Github頁面上為該圖像類使用了固定的寬度和高度，這不適用於該目的（小屏幕）。

在.food的CSS規則中，將width更改為100% ，將height更改為auto （以保持圖像比例不變），並添加box-sizing: border-box將邊框填充到100％的寬度中。 （或者，如果您確實希望圖像跨越整個寬度，則將padding設置為0）

Answer 3

您可以在代碼中針對不同的設備和方向使用以下斷點：

 /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /********** iPad 3 **********/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /* iPhone 5 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone 6 ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone 6+ ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* Samsung Galaxy S3 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* Samsung Galaxy S4 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } /* Samsung Galaxy S5 ----------- */ @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ }