0

私はメディア クエリを使用するのが初めてで、一部は機能していますが、他の機能は機能していません (理由を説明することはできません!) まず、問題のサイトはhttp://thermal-lab.comにあります。 . 上部の灰色のバナーのロゴを幅 700px 未満に一度サイズ変更してから (これは機能しています)、幅 515px で再度サイズ変更しようとしています (これは機能しています)。

しかし、グレーのフッター バー (2 番目のフッターと呼ばれる) の高さを 700px で 2 倍にしたいと思っていましたが、これはうまくいきません。どんな助けでも大歓迎です！

関連する CSS は次のとおりです。

.second-footer {
    width:100%;
    height:35px;
    position:fixed;
    bottom:90px;
    left:0;
    background:#f6f6f6;
    border-top:1px solid #c6c6c6;
    border-bottom:1px solid #c6c6c6;
}
.second-footer-wrapper span {
    display: inline-block;
}
.second-footer-wrapper {
    max-width: 980px;
    height: 35px;
    margin:0 auto;
    padding:0 12px;
}
.second-footer-font {
}
.second-footer-wrapper .left {  
    position: relative;
    float: left;
}
.second-footer-wrapper .right {
    position: relative;
    float: right;
}

これは、700px のメディア クエリのコードです。

@media screen and (max-width: 700px) {
    .wrapper .ut {
        width:185px;
        padding-top:4px;
    }
    .wrapper .csd {
        width:65px;
        padding-top:3px;
    }
    .wrapper .utsoa {
        width:186px;
        padding-top:2px;
    }
    .second-footer {
        height:70px;
    }
    .second-footer-wrapper {
        height: 70px;
    }
}
4

2 に答える 2

0

これはすべて、セレクターの強度と特異性に関するものです。メディア クエリ内でルールを定義しても、それ以上の具体性は得られません。メディア クエリ スタイルシートはドキュメントの前の方にあるため、具体性が低くなります。

これを修正するには、次の 2 つの方法があります。

  1. メディア クエリ スタイルシートをドキュメントの後半に移動します。
  2. メディア クエリ ルールのセレクターの特異性を高めます。

これは、メディア クエリ ルールのセレクターを次のいずれかに変更するのと同じくらい簡単です。

html .second-footer
div.second-footer
* .second-footer

男に魚をあげる vs 男に魚を教える

この問題は簡単に解決できました。これが私がそれをした方法です：

  1. 幅が700px未満のブラウザーで、thermal-lab.com を開きます。
  2. ヒットF12して開発者ツールを開きます。これは、FireBug のない FireFox を除くすべてのブラウザで機能します。 F12FireBug を開きますが、別途インストールする必要があります。FireFox の組み込みの開発者ツールを開くには、メニューを使用します。
  3. スタイルが期待どおりに適用されていないソース内の要素を見つけます。
  4. その要素のスタイル インスペクターを見てください。

Chrome 開発ツール

heightメディア クエリ ルールの定義が無効になっていることに注意してください。これは、要素がルールに一致したが、より具体的なルールも定義されていることを示していますheight。デフォルトのルール リストheightにも注意してください。取り消し線がないことは、これが適用されたルールであることを示しています。

両方のルールのセレクターは同じです。ルールの特異性を決定づけるのはドキュメントの順序です。ドキュメントの後半にある規則ほど、具体性が高くなります。

于 2013-07-30T22:00:55.480 に答える