0

メディアクエリ関連の質問をしばらく調べましたが、問題の解決策が見つかりませんでした。それは私が見落としている小さなことだと確信していますが、何らかの理由で私はそれを理解することができません。

そのため、縦向きの携帯電話用に調整したいクラス.ScopeToggleのボタンがあります。私は考えられるさまざまな方向性をすべて試しましたが、現在のやり方は次のとおりです。

HEADタグの場合：

<link rel="stylesheet" type="text/css" href="buttons.css" />
<link rel="stylesheet" type="text/css" href="mediaQuery.css" media="only screen and (max-width:340px)" />

buttons.cssスタイルシート：

#MainContainer .ScopeToggle
{
    position: absolute;
    right: 7px;
    width: 150px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    list-style: none;
    font-size: 0.8em;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.3);
}

mediaQuery.cssスタイルシート：

.ScopeToggle
{
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    background: none;
    width: 75px;
}

問題は、chromeの開発ツールでこれを見ると、メディアクエリスタイルが選択されて[スタイル]ペインに表示されていますが、取り消し線が引かれています（buttons.cssスタイルによってオーバーライドされていることを示すため）。

すべてのスタイルがドキュメントのHEADタグに書き込まれたばかりの場合、この問題は発生しませんでしたが、何らかの理由で、この抽象化により、期待どおりにカスケードできなくなりました。また、LINK要素にインラインの「media」属性を持たずにメディアクエリをスタイルシート内に直接配置しようとしました。また、buttons.cssの下にある独自のSTYLEタグ内にメディアクエリを配置しましたが、これはすべて同じです。結果。

考え？前もって感謝します。

4

1 に答える 1

2

デフォルトのスタイルには接頭辞IDが付いていますが、メディアクエリのスタイルには接頭辞が付いていません。

buttons.cssのCSSセレクター：

#MainContainer .ScopeToggle {...styles...}

mediaQuery.cssのCSSセレクター：

.ScopeToggle {...styles...}

したがって、「＃MainContainer」をmediaQuery.cssセレクターに追加すると、それが優勢になり、問題が解決します。

于 2012-12-21T00:25:17.910 に答える