媒体查询屏幕不起作用

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部分设置浏览器首次加载页面时的初始缩放级别。