メディアクエリが機能していないようですか？

私はここで間違っているかもしれないと確信していますが、私のメディアクエリは私が取り組んでいるこの新しい主にブートストラップベースのWebサイトでは動作していないようです。私のCSSに続いてメディアクエリが機能していないようですか？

<meta name="viewport" content="width=device-width, initial-scale=1">

私はこのようなものがあります：私はheadタグ内に配置している私のHTMLシートで

モバイルCSS

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
    h1 { 
    font-family: 'Lato', sans-serif; 
    font-style: normal; 
    color: #000000; 
    font-size: 6.5vw; 
    letter-spacing: 0.50em; 
    margin-left: 3%; 
    } 
    h2 { 
    font-family: 'Lato', sans-serif; 
    font-style: normal; 
    color: #000000; 
    font-size: 1.5vw; 
    letter-spacing: 0.25em; 
    } 
}

すべてのヘルプをありがとう！ありがとう！

出典

2016-11-03 user6949247

まずようにそれを書く私はあなたが編集しているCSSファイルは、ページの先頭に挿入された最後のCSSファイルであることを確認するチェックします。その下に他のものがある場合、あなたの変更を無効にすることができます。 –

@MichaelMcCoyと合意してください。スクリーンサイズが320pxと480pxの間にある場合、これらのスタイルはすべてのh1＆h2タグに適用されるはずです。そうでなければ、これらのスタイルをオーバーライドする他のCSSがあります。また、他のスタイルがあなたのCSSで '！important'宣言を使用していないことを確認してください。 –

これは、モバイルデバイス/デバイスエミュレータでこれをテストしましたが、それ以外の変更は表示されません。場合によっては、https://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-webを参照してください。 – vanburen

この

@media (min-width: 320px) and (max-width: 480px)

出典

2016-12-21 18:17:53 toast

メディアクエリが機能していないようですか？

答えて

関連する問題