3

私はレスポンシブ開発者（固定開発者ではなく）に移行しようとしています。私は最近、メディアクエリを理解しようとしていて、混乱しています。テストは簡単です：

ボディの背景色をモバイルの場合は赤、タブレットの場合は黄色、ワイドスクリーンの場合は緑に変更したいと思います。次のコードはこれを示しています（ほとんどの場合）。私が抱えている問題は、幅が480px（30em）を下回ると、背景がデフォルトに戻るcss（背景が赤から白に変わる）ことです。今..、私の小さな心は私に言います

     @media only screen and (min-width:1em) { body { background:red;} }

...それで問題は解決します！」

しかし、これは間違っていて直感的ではないようです。この単純なタスクを達成するための適切な方法を知っている人はいますか？

/*
==========================================================================
 MOBILE (min-width 480px)
========================================================================== */
   @media only screen and (min-width: 30em) {

    body { background:red; font-size:.75em; }

}


/* 
==========================================================================
 TABLETS (min-width 768px)
========================================================================== */
@media only screen and (min-width: 48em) {

body { background:yellow;  font-size:.85em; }

}

/* 
==========================================================================
 SCREENS (min-width 1140px)
========================================================================== */
@media only screen and (min-width: 71.25em) {

body { background:green;  font-size:1em; }

}
4

1 に答える 1

4

私があなたなら、CSS全体をに戻しますmax-width。max-width: XXスマートフォン、タブレット、その他のようなものmax-width: YYは画面です。したがって、次のようになります。

body { background:green;  font-size:1em; }  

@media only screen and (max-width: 71.25em) {
  body { background:yellow;  font-size:.85em; }
}

@media only screen and (max-width: 48em) {
  body { background:red; font-size:.75em; }
}
于 2013-02-05T12:16:44.263 に答える