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

I am working on creating my website in php from a week or more all my media queries working properly as defined... @media screen and (max-width: 768px) @media screen and (max-width: 600px) ...But suddenly chrome stopped working properly and showing contents of 768px on the width of 960px, and on 750px instead of 600px. I have refreshed chrome again and again even cache, but no result. But EADGE is working fine. Is there any problem with chrome refreshing frequently during developing website or something else? Kindly help me in this weird situation.

@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%;    }

}

I have found the mistake I'am making is that I have zoomed out my chrome browser to 67% that was cause the problem of width scaling. Now everything is working fine when I backed to 100% zoom.

I've seen some weird behavior in Chrome a few years ago, mainly when it didn't render the page from GPU (check this link for some info: Chrome and Media Queries Bug). But the solution offered there helped me back then, so put transform: rotateZ(0deg); on the body element. But without a code example, that`s the best guess I can make. Cheers

You should try min-width instead of max-width. I am sharing change code with you, Try it.

@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%;    }

}