屏幕的媒体查询不起作用

Question

我正在尝试根据 materialize.css 中的屏幕大小更改字体大小。但它不起作用。我究竟做错了什么？

 @media screen and (min-device-width: 600) and  (max-device-width: 1500) {
h1{
    font-size: 2em;
}
h5{
    font-size: 14px;
    color: green;
}}

Answer 1

只需将 px 添加到值

@media screen and (min-device-width: 600px) and  (max-device-width: 1500px) {
h1{
    font-size: 2em;
}
h5{
    font-size: 14px;
    color: green;
}}

Answer 2

请将 px 添加到宽度，例如 600px 而不是 600。另外，请务必将此元标记放在顶部 <meta name="viewport" content="width=device-width, initial-scale=1.0">

meta 视口元素向浏览器提供有关如何控制页面尺寸和缩放比例的说明。 width=device-width 部分将页面宽度设置为遵循设备的屏幕宽度（这将因设备而异）。 initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

Media query for screen not work