Question

我在我的风格底部有我的媒体查询，我正在尝试使我的网格占屏幕宽度的50％，但50％的媒体查询似乎永远不会在手机（iPhone 6s）上启动但是会在浏览器重新调整大小，我不知道为什么。

/* Media Queries*/
/* Max Width 1250px */
@media only screen and (min-width: 761px) and (max-width: 1000px) {
    .boxes {
        width: 33.3%;
    }
}

/* Max Width 750px */
@media only screen and (min-width: 501px) and (max-width: 760px) { 
    .boxes {
        width: 50%;
    }
}

/* Max Width 500px */
@media only screen and (max-width: 500px) { 
    .boxes {
        width: 100%;
    }
}

Answer 1

尝试添加此元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

Here's the MDN article on viewport meta tags

@media按预期工作

1 个答案: