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

Question

我刚刚为手机显示器编写了媒体查询，但它没有应用。有问题的代码如下。为了更好的上下文，我的github页面是here。我想要的是食物照片堆叠并占据屏幕的整个宽度，如底部的第一张照片所示。

@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) {
}

最大宽度：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（以保持图像比例不变）并添加{{ 1}}将填充包含在100％宽度中。 （或者如果你真的希望图像跨越整个宽度，则将填充设置为0）

Answer 3

以下是您可以在代码中使用的针对不同设备的一些断点＆amp;方向：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;