如何解决@media查询中的一个被跳过
编辑我实际上已经通过在HTML内部重新创建引导网格来解决此问题,从而消除了对创建的大多数媒体查询的需求。感谢您的所有帮助!
我遇到了问题,似乎找不到问题。
我的Web服务器上正在运行一个项目,除一个项目外,所有媒体查询均有效。好像跳过了。它显示在inspect元素中,我还验证了似乎没有发现任何错误的CSS,我的索引中也有META标记。
@media screen and (max-width:1199px) {...}
不起作用。
希望您能帮助我摆脱这个问题,谢谢!
这是CSS:
@media screen and (max-width: 1319px) {
.release-title {
margin-left:30px;
}
.release-desc {
margin-left:30px;
}
.trend-ct .title {
margin-left:30px;
}
.trend-ct .desc {
margin-left:30px;
}
.newshoe-title {
margin-left:30px;
}
.newshoe-desc {
margin-left:30px;
}
}
@media screen and (max-width: 1199px) {
.geeks {
height:600px;
}
.img-title {
padding-top:5px;
}
.launch-title {
margin-top:-10px;
}
.release-title {
margin-left:30px;
margin-top:10px;
}
.release-desc {
margin-left:30px;
}
.trend-ct .title {
margin-top:10px;
margin-left:30px;
}
.trend-ct .desc {
margin-left:30px;
}
.trend-ct {
height:480px;
}
.trend-ct .desc:hover {
margin-left:60px;
}
.newshoe-title {
margin-top:10px;
margin-left:30px;
}
.newshoe-desc {
margin-left:30px;
}
.subbox {
margin-top:-50px;
}
.footer {
height:400px;
}
}
@media screen and (max-width: 1090px) {
.geeks {
height:100px;
}
.img-title {
padding-top:5px;
}
.launch-title {
margin-top:20px;
}
.release-title {
margin-left:110px;
margin-top:-100px;
}
.release-desc {
margin-left:110px;
}
.trend-ct .title {
margin-top:-110px;
margin-left:110px;
}
.trend-ct .desc {
margin-left:110px;
}
.trend-ct {
height:800px;
}
.trend-ct .desc:hover {
margin-left:165px;
}
.newshoe-title {
margin-top:-110px;
margin-left:110px;
}
.newshoe-desc {
margin-left:110px;
}
.subbox {
margin-top:-325px;
}
.footer {
height:830px;
}
}
@media screen and (max-width: 844px) {
.between-ct {
height:800px;
}
.subbox {
margin-top:50px;
float:left;
}
.nav-link{
display:block;
width:100%;
padding:20px;
font-size:21px;
font-weight:normal;
}
}
@media screen and (max-width: 813px) {
.lookup {
width:15%;
}
}
@media screen and (max-width: 538px) {
.lookup {
width:20%;
}
}
@media screen and (max-width: 445px) {
.lookup {
font-size:13px;
top:-2px;
}
.subbox {
width:100%;
}
}
@media screen and (max-width: 403px) {
.between-ct {
height:850px;
}
.lookup {
width:25%;
}
}
这是我的META标签的标题:
<meta name="viewport" content="width=device-width,initial-scale=1">
解决方法
尝试在only
之后添加@media
:
@media only screen and (max-width: 1319px) {
.release-title {
margin-left:30px;
}
.release-desc {
margin-left:30px;
}
.trend-ct .title {
margin-left:30px;
}
.trend-ct .desc {
margin-left:30px;
}
.newshoe-title {
margin-left:30px;
}
.newshoe-desc {
margin-left:30px;
}
}
@media only screen and (max-width: 1199px) {
.geeks {
height:600px;
}
.img-title {
padding-top:5px;
}
.launch-title {
margin-top:-10px;
}
.release-title {
margin-left:30px;
margin-top:10px;
}
.release-desc {
margin-left:30px;
}
.trend-ct .title {
margin-top:10px;
margin-left:30px;
}
.trend-ct .desc {
margin-left:30px;
}
.trend-ct {
height:480px;
}
.trend-ct .desc:hover {
margin-left:60px;
}
.newshoe-title {
margin-top:10px;
margin-left:30px;
}
.newshoe-desc {
margin-left:30px;
}
.subbox {
margin-top:-50px;
}
.footer {
height:400px;
}
}
@media only screen and (max-width: 1090px) {
.geeks {
height:100px;
}
.img-title {
padding-top:5px;
}
.launch-title {
margin-top:20px;
}
.release-title {
margin-left:110px;
margin-top:-100px;
}
.release-desc {
margin-left:110px;
}
.trend-ct .title {
margin-top:-110px;
margin-left:110px;
}
.trend-ct .desc {
margin-left:110px;
}
.trend-ct {
height:800px;
}
.trend-ct .desc:hover {
margin-left:165px;
}
.newshoe-title {
margin-top:-110px;
margin-left:110px;
}
.newshoe-desc {
margin-left:110px;
}
.subbox {
margin-top:-325px;
}
.footer {
height:830px;
}
}
@media only screen and (max-width: 844px) {
.between-ct {
height:800px;
}
.subbox {
margin-top:50px;
float:left;
}
.nav-link{
display:block;
width:100%;
padding:20px;
font-size:21px;
font-weight:normal;
}
}
@media only screen and (max-width: 813px) {
.lookup {
width:15%;
}
}
@media only screen and (max-width: 538px) {
.lookup {
width:20%;
}
}
@media only screen and (max-width: 445px) {
.lookup {
font-size:13px;
top:-2px;
}
.subbox {
width:100%;
}
}
@media only screen and (max-width: 403px) {
.between-ct {
height:850px;
}
.lookup {
width:25%;
}
}@media only screen and (max-width: 1319px) {
.release-title {
margin-left:30px;
}
.release-desc {
margin-left:30px;
}
.trend-ct .title {
margin-left:30px;
}
.trend-ct .desc {
margin-left:30px;
}
.newshoe-title {
margin-left:30px;
}
.newshoe-desc {
margin-left:30px;
}
}
@media only screen and (max-width: 1199px) {
.geeks {
height:600px;
}
.img-title {
padding-top:5px;
}
.launch-title {
margin-top:-10px;
}
.release-title {
margin-left:30px;
margin-top:10px;
}
.release-desc {
margin-left:30px;
}
.trend-ct .title {
margin-top:10px;
margin-left:30px;
}
.trend-ct .desc {
margin-left:30px;
}
.trend-ct {
height:480px;
}
.trend-ct .desc:hover {
margin-left:60px;
}
.newshoe-title {
margin-top:10px;
margin-left:30px;
}
.newshoe-desc {
margin-left:30px;
}
.subbox {
margin-top:-50px;
}
.footer {
height:400px;
}
}
@media only screen and (max-width: 1090px) {
.geeks {
height:100px;
}
.img-title {
padding-top:5px;
}
.launch-title {
margin-top:20px;
}
.release-title {
margin-left:110px;
margin-top:-100px;
}
.release-desc {
margin-left:110px;
}
.trend-ct .title {
margin-top:-110px;
margin-left:110px;
}
.trend-ct .desc {
margin-left:110px;
}
.trend-ct {
height:800px;
}
.trend-ct .desc:hover {
margin-left:165px;
}
.newshoe-title {
margin-top:-110px;
margin-left:110px;
}
.newshoe-desc {
margin-left:110px;
}
.subbox {
margin-top:-325px;
}
.footer {
height:830px;
}
}
@media only screen and (max-width: 844px) {
.between-ct {
height:800px;
}
.subbox {
margin-top:50px;
float:left;
}
.nav-link{
display:block;
width:100%;
padding:20px;
font-size:21px;
font-weight:normal;
}
}
@media only screen and (max-width: 813px) {
.lookup {
width:15%;
}
}
@media only screen and (max-width: 538px) {
.lookup {
width:20%;
}
}
@media only screen and (max-width: 445px) {
.lookup {
font-size:13px;
top:-2px;
}
.subbox {
width:100%;
}
}
@media only screen and (max-width: 403px) {
.between-ct {
height:850px;
}
.lookup {
width:25%;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。