19

私は (いつものように)@media printルールを使用して、Web ページの印刷物がオンライン バージョンとどのように異なるべきかを指定しました。これは非常にうまく機能しますが、テストは非常に困難です。私が通常しなければならないことは、次の手順です。

  1. と の異なるスタイルを作成しscreenますprint。
  2. 画面モードでページを開始します
  3. ページを PDF プリンターなどで印刷します。
  4. 結果を見てください。
  5. 正しく動作しないルールを見つけてください。

私がやりたいこと（ただし、どのブラウザでも実行できませんでした）：

  1. と の異なるスタイルを作成しscreenますprint。
  2. 画面モードでページを開始します
  3. プレビュー印刷モードに入ります (たとえば、Opera の場合、Firefox が利用可能)。
  4. Firebug (Firefox) や Dragonfly (Opera) などの利用可能なツールを使用して、DOM と現在のスタイルを調べます。
  5. その場で CSS を変更し、ページをリロードして、結果と DOM をもう一度確認します。

同様の結果を得るために利用できるブラウザ、またはブラウザ、プラグイン、およびプロセスの組み合わせはありますか? ファイルの構成を変更する方法を考えている場合は、最小限の変更で目的の結果を得ることができます。

4

6 に答える 6

16

Chrome 開発者ツールにはこの機能があります。

  1. テストするページの Chrome デベロッパー ツールを開きます。
  2. まだ開いていない場合は、引き出しを開きます。（ を押すEsc）
  3. [エミュレーション] タブを開きます。
  4. 左側のメニューで[メディア] をクリックします。
  5. CSSメディアにチェックを入れ、セレクトボックスから印刷を選択

ソース: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types

于 2014-03-07T00:24:32.647 に答える
10

「Web 開発者」( https://addons.mozilla.org/en-US/firefox/addon/web-developer/ )と呼ばれる Firefox プラグインには、「メディア タイプごとに CSS を表示する」オプションがあります。

于 2012-05-27T12:33:28.110 に答える
1

Print＆Screen CSSルールを個別のファイルで指定すると、Chromeデベロッパーツールを使用してこれを非常に簡単に行うことができます。ページをロードして、開発ツールを開きます。[要素]ビューで、media="print"行を編集してmedia="all"と表示します。

たとえば、次のようにスタイルシートをリンクする場合：

<link href="/static/global/css/theme.css" media="all" rel="stylesheet" type="text/css" />
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css"   />

変化する：

<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />

読むために：

<link href="/static/global/css/print.css" media="all" rel="stylesheet" type="text/css" />

これで、ブラウザウィンドウのコピーに印刷スタイルが適用されます。他のWebページと同じように、スタイルと要素をナビゲートできます。

于 2012-10-01T15:29:29.507 に答える
1

Rails 3.1アセットパイプラインを使用して条件付きで特定の css を使用することに触発された問題に対する別の解決策を見つけました。仕組みは次のとおりです。

  • メインの HTML ファイルで、スタイルシートの次のディレクティブを使用します。

    <link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

  • スタイルシート内のすべてのルールを分離します。

    • 画面と印刷に適しています (スタイルシート: application.css)
    • 画面にのみ適切 (スタイルシート: screen.css)
    • 印刷にのみ適しています (スタイルシート: print.css)

  • Web ページの印刷テスト中に、メインの HTML ファイルのスタイルシートを切り替えます。

    <link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="print" rel="stylesheet" type="text/css" />
<link href="print.css" media="screen" rel="stylesheet" type="text/css" />

の 2 行目と 3 行目のスイッチに注目してくださいmedia="print|screen"。

その結果、メインの HTML ファイルを呼び出して、通常の状態で印刷した場合にどのように表示されるかを確認できるようになりました。通常使用するすべてのツール (Firefox Firebug、Chrome 開発者ツール、Opera DragonFly など) は通常どおり機能するため、DOM をチェックし、ボックスを確認し、その場で CSS を変更して、ページをリロードするだけです。 .

私にとってはかなりうまく機能します。いくつかの欠点に遭遇した場合は、戻ってきてそれも書き留めます。

于 2012-05-28T08:06:07.133 に答える
1

これは、印刷レイアウトが一般的なスタイリングの変更である必要がある場合に、印刷用のスタイリングに役立つことがわかったプラクティスです。

  1. @media print { } を使用して印刷スタイルを構成する印刷スタイル シートを作成します。
  2. そのスタイル シートを最後に適用する
  3. 印刷スタイルの作業中に、印刷スタイルを構成する行を一時的にコメントアウトします
  4. 使い慣れた方法で Firebug と Web Developer を使用する
  5. メディア ブラケットのコメントを外します

何かのようなもの：

    
/* @media print { */

    #sidebar {display:none;}

/* } */
于 2013-02-17T03:14:23.540 に答える
1

Print Friendly Google Chrome 拡張機能を試してみましたか。

ボタンを追加し、クリックで Web ページの pdf を生成する素晴らしい拡張機能です。現在のプロセスよりも簡単になることを願っています。

于 2012-05-27T12:27:54.493 に答える