3

私は3週間以上、さまざまな実装を試して、右側のセクションを非表示にし、左側のセクションを全幅で表示しようとしました。私の調査によると、印刷プレビューを確認せずに印刷ビューをすばやくレンダリングする簡単または合理化された方法はないため、これを理解するための助けを求めています。

機能していない印刷メディア CSS は次のとおりです。

#gc {
    width: 100%;
}
#asideTrack {
/*      width: 100%;*/
    display: none;
}
.asideTrack {
/*      width: 100%;*/
    display: none;
}
.slideAside {
/*      width: 100%;*/
    display: none;
}
#slideAside {
    display:none
}

助言がありますか？

4

1 に答える 1

10

CSS では、優先度が同じ場合 (セレクターによって異なります)、下位のルールが上位を上書きします。

@media ブロックにない一般的な css を記述し、@media 印刷ブロックよりも低いため、@media 印刷スタイルを上書きします。たとえば、印刷プレビューで左側のブロックの幅が 74% になっているのは、これが原因です (このルールは、100% と言う @media 印刷ブロックのルールよりも低いためです)。

お役に立てば幸いです。

ソリューション

  1. css ファイルでは、メディア印刷ブロックをファイルの最後に配置できます。
  2. !importantメディア印刷ブロックのいくつかのルールにディレクティブを追加します。例: p { color: red !important; }
  3. スクリーン用の特別な css をメディア スクリーン ブロックに配置します。
于 2012-07-28T06:58:30.523 に答える