単純なメディアクエリでは、divのサイズを変更したり、クロムやIEのフォントを変更したりしません。

Question

この非常に単純なメディアクエリは、私が問題の原因を見つけるために望んだことですが、divの 'all'はChromeやIEではサイズが変更されません。奇妙なことにFFで動作します。私は実際のメディアクエリのすべての策定を試みました。どんな助けもありがたい。ここで

は、ここでHTML

<div class="all"> 
Adipiscing accumsan at habitasse pharetra eu a magna sollicitudin ...</div> 

の一部である、あなたのメディアクエリから静的な幅を削除する必要がCSS

body { 

    font-weight: bold; 
    font-family: sans-serif; 
    font-size: 20px; 
    background: white; 

} 

.all { 

    width: 200px; 
    margin: auto; 
    margin-top: 300px; 
    background: blue; 

} 

@media only screen and (max-width: 700px) { 
     .all { 
     width: 690px; 
     font-size: 30px; 
    } 
} 

Answer 1

です。この例で行ったように100％以下にしてください。あなたがそれを書いたやり方で、小さい画面ではdivは常に690pxの幅になります。

body { 
 

 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    background: white; 
 

 
} 
 

 
.all { 
 

 
    width: 200px; 
 
    margin: auto; 
 
    background: blue; 
 

 
} 
 

 
@media only screen and (max-width: 700px) { 
 
     .all { 
 
     width: 100%; 
 
     font-size: 30px; 
 
    } 
 
}

<div class="all"> 
 
Adipiscing accumsan at habitasse pharetra eu a magna sollicitudin ...</div>

Answer 2

それが正常に動作しますが、多分あなたは混同しています。私はあなたがメディアのクエリに小さなものをしたいと思う。

body { 

    font-weight: bold; 
    font-family: sans-serif; 
    font-size: 20px; 
    background: white; 

} 

.all { 

    width: 690px; 
    margin: auto; 
    margin-top: 300px; 
    background: blue; 

} 

@media only screen and (max-width: 700px) { 
     .all { 
     width: 200px; 
     font-size: 30px; 
    } 
} 

http://codepen.io/paulcredmond/pen/NRmpXp

ここChromeで私のために