CSS メディア クエリを使用して特定の Div のみを印刷するにはどうすればよいですか?

CSS メディア クエリを使用した特定のコンテンツの印刷

Web ページ上の特定の div のみを印刷するリクエストは、保存しようとするときに問題が発生しますその外観を確認し、不要な要素を除外します。この問題は、CSS メディア クエリを使用して効果的に対処できます。

次の CSS コード スニペットは、ページ上の他のコンテンツに影響を与えることなく、指定された div を印刷できるソリューションを提供します。

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

この CSS コードでは:

• @media print {} ブロックは印刷固有のものを定義しますスタイル。
• body 要素には、ページ上の他のすべての要素を隠すために、表示設定が割り当てられます。
• #section-to-print div (目的のコンテンツが含まれる) には、表示設定が割り当てられます。印刷時の外観を確認するために表示されます。
• position: ABS とともに left: 0 および top: 0 を指定すると、div が印刷可能ファイル内で正しく配置されるようになります。

このメソッドを利用すると、新しい印刷プレビュー ダイアログをトリガーしたり、元のページ レイアウトを変更したりせずに、目的の div を印刷できます。

以上がCSS メディア クエリを使用して特定の Div のみを印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。