Question

我正在努力在一周或更长时间内在php中创建我的网站所有我的媒体查询按照定义正常工作... @media screen and（max-width：768px） @media屏幕和（最大宽度：600px） ...但突然镀铬停止正常工作并在 960px 的宽度上显示 768px 的内容，并在 750px上显示 而不是 600px 。我一次又一次刷新chrome甚至缓存，但没有结果。但EADGE工作正常。在开发网站或其他什么时候，铬经常刷新有问题吗？请在这种奇怪的情况下帮助我。

@media screen and (max-width: 900px) { 
.side-btn{
    font-size: 100%;
    margin: 4px 5px;
    padding: 3% 3%;
}
}
@media screen and (max-width: 768px){
.nav1 ul li{
    clear: both; 
    width: 100%;
    border-right: none;     
    border-bottom: 1px solid grey;      
}
.nav2 {     display: block; }
.navul{     display: none;  }

}
@media screen and (max-width: 600px) {
.startmenu,.itemhead{   font-size: 100%;}
.side-btn{
    font-size: 80%;
    margin: 4px 3%;
    padding: 3% 3%;
}
.itbody{ height: 340px; }
.custom{
    margin-top: 3px;        
    width: 100%; 
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.inqbasket{
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
}
.ifcol1{    width: 100%;    }
.ifcol2{    width: 100%;    }

}

Answer 1

我发现我犯的错误是我将我的Chrome浏览器缩小到67％，导致宽度缩放问题。现在，当我支持100％缩放时，一切正常。

Answer 2

几年前我在Chrome中看到了一些奇怪的行为，主要是因为它没有从GPU渲染页面（请查看此链接获取一些信息：Chrome and Media Queries Bug）。但那时提供的解决方案帮助了我，所以将transform: rotateZ(0deg);放在body元素上。但是没有代码示例，这是我能做出的最佳猜测。干杯

Answer 3

你应该尝试min-width而不是max-width。我正在与您分享更改代码，请尝试。

@media screen and (min-width: 900px) { 
.side-btn{
    font-size: 100%;
    margin: 4px 5px;
    padding: 3% 3%;
}
}
@media screen and (min-width: 768px){
.nav1 ul li{
    clear: both; 
    width: 100%;
    border-right: none;     
    border-bottom: 1px solid grey;      
}
.nav2 {     display: block; }
.navul{     display: none;  }

}
@media screen and (min-width: 600px) {
.startmenu,.itemhead{   font-size: 100%;}
.side-btn{
    font-size: 80%;
    margin: 4px 3%;
    padding: 3% 3%;
}
.itbody{ height: 340px; }
.custom{
    margin-top: 3px;        
    width: 100%; 
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.inqbasket{
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
}
.ifcol1{    width: 100%;    }
.ifcol2{    width: 100%;    }

}

css媒体查询在谷歌浏览器上无法正常工作

3 个答案: