画面ベースのサイズに関係なく、以前のスタイルをオーバーライドするemベースの最小幅のメディアクエリ

Question

zurb foundation for sitesでサイトを構築しています。この問題が発生しました：タブレットレイアウトのいくつかのスタイルをオーバーライドするときに、モバイル用のスタイル。私は何が間違っているのか分かりません。

私のCSS：

.footer { 
    background-color: #FF7338; 
    } 
} 

/* 
LANDSCAPE PHONE 
*/ 
@media only screen and (min-width: 40em) and (orientation: landscape) { 
    .footer { 

    } 
} 

/* 
TABLET 
*/ 
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
    .footer { 
     background-color: pink; 
    } 
} 

私はクロームでサイトを調べると、フッターがすべての電話（320PXから始まる）で、ピンク、タブレット（768pxから始まる）です。

ありがとうございました。

Answer 1

私はメディアクエリを構築する方法がある：私はモバイル-最初のサイトを構築するような小さな画面用

ませメディアクエリは、これがデフォルトのスタイルではありません。

はその後、私はスタイルシートで使用するメディアクエリは、次のとおりです。

/* MEDIA QUERIES */ 
/* for 768px screens or more */ 
@media only screen and (min-width: 768px) { 
... 
} 

/* for 1024px screens or more */ 
@media only screen and (min-width: 1024px) { 
... 
} 

だから私はタブレットとデスクトップのスタイルを設定することができます。私はメディアクエリの設定にピクセルを使用していますが、代わりにemsを使用しても問題ありません。

要約すると、メディアクエリのやり方を変更する必要があります。現時点では、あなたが持っている2つはお互いに似ています。