5

グラフィカルおよびナビゲーション要素が印刷プレビュー/印刷に表示されないように、print.css を効果的に使用する方法について学習しようとしています。いくつかの記事と、html5 ボイラープレートの print css の一部を読んでください。印刷中に外観を変更する方法が非常に印象的だった 2 つのサイトは、次のとおりです。

http://css-tricks.com/

http://bottlerocketcreative.com/

しかし、印刷に関連するcssが表示されません。同様の変換を行う方法を学ぶために彼らが使用する css を教えてください。

4

1 に答える 1

9

リンク先のサイトを確認しましたが、印刷スタイルが関連付けられていないようです。ブラウザのデフォルトの印刷設​​定を使用していると思います。大きな変更点の 1 つは、背景画像がデフォルトで非表示になったことです。CSS-Tricks の場合、これほど異なるように見える理由は、メディア クエリを使用しているためです。そのため、ブラウザを 800px 以下に狭めると、ドキュメントを印刷したときと同様に、投稿のリストがブラウザの幅いっぱいに拡大されることがわかります。

ただし、通常、印刷スタイルは、既存のスタイルシートのメディア タグを使用して設定されます。

@media print{
    /*styles here*/
}

または印刷専用のスタイルシートへのリンク:

<!--These styles styles are only for screens as set by the media value-->
<link rel="stylesheet" href="css/main.css" media="screen">

<!--These styles styles are only for print as set by the media value-->
<link rel="stylesheet" href="css/print.css" media="print">
于 2012-10-07T22:01:37.583 に答える