cssのメディアクエリが正しく動作しない

Question

私は1週間以上、私のメディアクエリが正しく定義されたとおりに動作するようにPHPで自分のウェブサイトを作成しています... @mediaの画面と（最大幅：768px） @media画面と（最大幅：600PX） ...しかし、突然、Chromeが正常に動作しと960ピクセル幅の幅に768pxの内容を示す、代わりに750pxに停止600px。 私はキャッシュを何度もリフレッシュしましたが、結果はありません。しかし、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

は、私は幅スケーリングの問題を引き起こした67％に自分のChromeブラウザをズームアウトしていることです。 100％ズームにバックアップしても、すべてうまくいきました。

Answer 2

私はそれが（いくつかの情報のために、このリンクをチェック：Chrome and Media Queries Bug）GPUからページをレンダリングしていない主とき、数年前にChromeでいくつかの奇妙な行動を見てきました。しかし、そこに提供された解決策は私に助けてくれたので、transform: rotateZ(0deg);をbody要素に入れてください。しかし、コード例がなければ、それは私が作ることができる最高の推測です。乾杯してください

Answer 3

max-widthの代わりにmin-widthを試してください。あなたと変更コードを共有しています。試してみてください。私は間違いI'am作りを発見した

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

}