モバイルでメディアクエリが機能しないのはなぜですか？

-1

私はhtmlページでメディアクエリを使用しました。小さな画面と500px以上の両方に対応します。ここにサンプルがあります。モバイルでメディアクエリが機能しないのはなぜですか？

.col-1 { width: 58%;} 
 
.col-2 {width: 25%;} 
 
.col-3 {width: 16%;} 
 
.col-4 {width: 100%;} 
 

 

 
@media only screen and (min-width: 480px) { 
 
.col-sm-1 {width: 100%;} 
 
} 
 
    
 
    
 
<body> 
 
<div class="header col-4 col-sm-1"></div> 
 
<div class="aside col-2 col-sm-1"></div> 
 
<div class="main col-1 col-sm-1"></div> 
 
<div class="right-col col-3 col-sm-1"></div> 
 
<div class="footer col-4 col-sm-1">

私は480PX以下に、ブラウザのウィンドウのサイズを変更する、100％にすべてのdivの幅の変更。私はそのファイルを自分の携帯に転送します。モバイルブラウザでファイルを開くと、幅は100％に変わりません。しかし、ズームレベルは

出典

2017-10-02 kashif Riaz

を使用しているすべてのフレームワークのバージョンを言及することを忘れないでください。ブートストラップ3/4など。 – TidyDev

私はフレームワークを使用していません。私はメモ帳を使用しています。++ –

確かに最大幅が必要です：480px未満で適用する場合は480px –

てみてください：これは100％の幅を適用します

@media only screen and (max-width: 480px) { 
.col-sm-1 {width: 100%;} 
}

とき画面は480px以下です。

まだ喜びなら、試してみてください。

@media only screen and (max-width: 480px) { 
    .col-1, 
    .col-2, 
    .col-3 { 
    width: 100%; 
    } 
}

出典

2017-10-02 14:50:28

media only screen and (min-width: 480px) {

ニーズがあることを良い（読みやすい良い）である

@media only screen and (min-width: 480px) {

出典

2017-10-02 14:21:24 Alex

申し訳ありませんが、私はWebページに@medaiを追加しましたが、 –

モバイルでメディアクエリが機能しないのはなぜですか？

答えて

関連する問題