メディアクエリ幅は、

を守られていない、次のように私は現在、3つのセクションとフッターがレイアウトされている：メディアクエリ幅は、

.foot1, .foot2, .foot3 { width: 33%; float: left; } 
.foot2 { margin: 0 0.5%; }

を、私は彼らが768pxと480PXでレイアウトを変更したいです。私は（すべて3のスタックを持っていると幅を取るために）480PXで

.foot1 { width: 98%; float: none; margin: 0 1%; } 
.foot2, .foot3 { width: 48%; margin: 0 1%; }

：768pxで、私は（＃2 & 3分割その下のスペースで、上部の最初のスタックする）は、次のしています持っています：

.foot2, .foot3 { width: 98%; float: none; }

私の問題は、480px以下では、幅が追従しておらず、まだ48％にとどまっていることです。 Chromeで「inspect」を使用すると、「float：none;」という文字列が表示されます。追跡中であるが、メディアクエリからの幅ではない。

フロート宣言を認識するのはなぜだが、幅は認識できない理由は誰にも分かりますか？98％？

ありがとうございます！

出典

2011-10-19 user1004108

確かに、それはそれを行うべきではなく、心に来る最初の説明はもちろん、あなたが実際にfoot1、foot2とfoot3を持っていない限り、あなたは各メディアクエリ（のための特異性の同じレベルを使用していないということです"div＃container div.element div.foot1"のようなものではなく）。ところで、 "Matched CSS Rules"の下の "@media only screen"（max-width：480px）のようなものが表示されたら、正しいメディアクエリを使用しているかどうかを知っています。 –

media-query CSSを貼り付けてもよろしいですか？私は '@media screen'の部分を指しています。 – stephenmurdoch

'float：none'をお持ちの場合、ディスプレイは自動的に' block'に設定されません。 CSS表示設定とは何ですか？インラインの場合、幅宣言は使用されません。 – HerrSerker

問題は再現しようとしましたが、実行できませんでした。

私のテストコードは、あなたが望むように動作すると信じています。あなたのコードは以下のhtml/cssとどう違うのですか？

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css"> 
    .foot1 { background: tan } 
    .foot2 { background: green } 
    .foot3 { background: blue } 
    .foot1, .foot2, .foot3 { width: 33%; float: left; } 
    .foot2 { margin: 0 0.5%; } 
    @media screen and (max-width: 768px) { 
     .foot1 { width: 98%; float: none; margin: 0 1%; } 
     .foot2, .foot3 { width: 48%; margin: 0 1%; } 
    } 
    @media screen and (max-width: 400px) { 
     .foot2, .foot3 { width: 98%; float: none; } 
    } 
    </style> 
</head> 
<body> 
<div class="foot1">foot1</div><div class="foot2">foot2</div><div class="foot3">foot3</div> 
</body> 
</html>

出典

2012-03-27 06:48:01

答えて

関連する問題