为什么我的媒体查询不适用？

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