1

CSS3 メディア クエリで問題が発生しています...

ここに私が現在取り組んでいるものの小さなスニペットがあります:

@media only screen 
and (max-width : 420px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

私は「モバイル ファースト」の観点から作業しており、「カスケード」の側面に関する CSS の通常の動作を考えると、2 番目の@mediaステートメントが前のステートメントからすべてのスタイルを継承し、一致するものをオーバーライドすることが期待されます。または「より重い」セレクター。

(さらに、CSS の優先順位は、一致するスタイル定義が、!importantステートメントで「切り捨て」られない限り、最後に定義されたルールセットを使用することを意味します!)

私が見たところ、テストといくつかの Google / SE 検索を通じて、これは当てはまりません。

スタイル ルールが該当する以前のステートメントから継承される可能@media性はありますか?それとも、ステートメントごとに必要なすべてのルールを繰り返さなければならないのでしょうか? (あまり乾燥していない)

これに関するヘルプと説明/説明をいただければ幸いです。

4

2 に答える 2

3

まず、@BoltClock (両方のコメントに対して) と、他のコメントと回答に感謝します。

メディアクエリを間違えたか、それらがどのように機能し、相互作用するかを誤解していたと思います. 私は次のように質問を編集するつもりでしたが、回答としてより理にかなっていると判断しました（それが私が使用したソリューションであるため）。これが他の人の時間を無駄にしてしまった場合は、お詫び申し上げます。

コードの私の固定スニペットは次のとおりです。

@media only screen 
and (max-width : 480px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}
/* Increase the main title for slightly larger screens! */
@media only screen 
and (min-width : 421px)
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

あなたのコメントから、必要な範囲/制限をカバーするために最初のブロックの最大幅を増やした場合、その後に2番目のブロックをネストまたは追加できることに気付きました(両方を試してみましたが、両方ともうまくいきました-クロムを使用)ブラウザ [18.0.1025.151])。page .alphaこれにより、要素のフォントサイズが必要なステップ/間隔で増加するという点で、望ましい結果が得られました。

助けてくれたすべてのSO'ersに再び感謝します！(そして、彼らが構築を支援した素晴らしいコミュニティの SE に)

知識 > オープンソース > 自由

于 2012-08-25T18:37:42.170 に答える
1

モバイルから作業する場合は、モバイル レイアウトをデフォルト レイアウトとして設定する必要があります。(クエリを削除します)。そこから、クエリは上から継承されます。

.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }

 /* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}
于 2012-08-25T14:28:33.193 に答える