css代码的
我注意到其他人也遇到了这个问题，我尝试了我能找到的建议方法，甚至在标头内的标记中尝试了@import规则。但没有骰子。不确定我是否需要http-equiv元标签，但它是在另一个网站上建议的。以下是索引html文件的标题示例：
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Thephotographerseye: Greg Holloway Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Links to stylesheet and google fonts -->
<link rel="stylesheet" href="stylesheets/index.css">
<link rel="stylesheet" href="stylesheets/fonts.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Charm:wght@400;700&family=Roboto:wght@300;400;700&display=swap">
以下是css文件中的一些媒体查询：
@media screen and (max-width: 599px) {
.brandImg .material-icons {font-size: 18px;}
#openingAnimation::before {width: 60%;}
}
@media screen and (min-width: 800px) {
.navlinks {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.navlinks a {flex: 50%;}
}
我只做了前端设计，它通过Dreamweaver上传到了我的朋友域。关于为什么移动设备会出现问题，有什么想法吗？任何建议都将不胜感激，谢谢！
序列也非常重要。
例如
@media screen and (max-width: 599px) {
.brandImg .material-icons {font-size: 18px;}
#openingAnimation::before {width: 60%;}
}
@media screen and (min-width: 800px) {
.navlinks {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.navlinks a {flex: 50%;}
}
.brandImg .material-icons {font-size: 22px;}
#openingAnimation::before {width: 80%;}
.navlinks {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.navlinks a {flex: 580%;}
不会起作用。应该如下。。。
.brandImg .material-icons {font-size: 22px;}
#openingAnimation::before {width: 80%;}
.navlinks {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.navlinks a {flex: 580%;}
@media screen and (max-width: 599px) {
.brandImg .material-icons {font-size: 18px;}
#openingAnimation::before {width: 60%;}
}
@media screen and (min-width: 800px) {
.navlinks {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.navlinks a {flex: 50%;}
}
因此，如果@media在之前或之后，请检查您的整个css的顺序。