我搜索了有关该主题的其他几篇文章，但似乎仍无法获得媒体查询以适用于移动设备。我已经将我能想到的所有内容添加到我的头和CSS中，但似乎没有任何效果。
这是我的代码：
html
<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-
scalable=yes">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
css
@media screen and (max-width: 900px) {
.material-icons{
font-size: 100%;
}
.header h1{
margin-top: 5px;
font-size: 150%;
}
}
@media screen and (max-device-width: 750px) {
.material-icons{
font-size: 50%;
}
.header h1{
margin-top: 10px;
font-size: 80%;
}
.main-pic{
height: 25%;
}
}
@media screen and (max-device-width: 480px){
.material-icons{
display: none;
}
.header h1{
margin-top: 10px;
font-size: 80%;
}
.main-pic{
height: 25%;
}
}