我可能在这里遗漏了一些非常基本的东西。此代码在 chrome 上运行完美,但出于某种原因,Safari 似乎没有读取这些媒体查询。任何帮助,将不胜感激。新的编码器在这里。
@media screen and (max-width: 768px) {
#wellLogo {
height: 250px;
margin-top: 175px;
}
.home1 {
background-image: url("../assets/img/sanctuaryS.png");
}
@media screen and (max-width: 480px) {
.standardParallax {
background-attachment: scroll;
height: 175px;
}
#wellLogo {
height: 100px;
margin-top: 40px;
}
h1 {
font-size: 30px;
}
.mission {
display: block;
margin: 5px;
margin-left: auto;
margin-right: auto;
height: 70px;
width: 175px;
border-radius: 25px;
border: 5px solid rgba(107,84,71,.9);
}
h5 {
font-size: 20px;
}
#spanish {
margin-left: auto;
margin-right: auto;
}
#english {
margin-right: auto;
margin-left: auto;
}
#missionPadding {
padding-top: 0px;
}
#exchange {
margin-left: auto;
margin-right: auto;
padding-top: 0px;
}
#elements {
margin-left: auto;
margin-right: auto;
}
.margin1 {
margin-bottom: 5px;
}
.section {
height: 375px;
}
#section1 {
height: 400px;
}
.section2 {
height: 300px;
}
}
最佳答案
缺少第一个媒体查询的右大括号。
关于css - Safari 不响应媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42124456/