CSSの特定の要素のクラスに基づいて印刷するためのページサイズを変更

Question

私は1ページのアプリケーションで作業します。 divのclassに基づいて、横向きまたは縦向きのページを印刷したいとします。そして最も難しい部分は：私は、CSSだけ、javascriptを使用したい。例えば

、 それが動作しないのです、私は印刷

@media print { 
    @page { 
    size: landscape 
    } 
} 

のデフォルトサイズを持っているが、私はブロック"frame"は、改質剤を使用残念なことに"media"

を持っている場合は、それのサイズを変更したい：

@media print { 
    @page .frame ._media { 
    size: portrait 
    } 
} 

Answer 1

@pageのセレクタを追加することはできません。追加できる擬似クラスはいくつかあります。あなたはここではそれらについての詳細を読むことができます：

https://developer.mozilla.org/en/docs/Web/CSS/@page

最善の解決策は、JSを使用することであろう。しかし、あなたはCSSだけでそれをやりたいからです。

クラスを使用して@pageルールを設定する方法はありません。

私の解決策は次のとおりです.2つの異なるスタイルシート（style1.css、style2.css）があり、class1にはstyle1.cssが含まれており、class2にはstyle2.cssが含まれています。

style1.css：

@media print { 
    @page { 
    size: landscape 
    } 
} 

とstyle2.css：

@media print { 
    @page { 
    size: portrait; 
    } 
} 

あなたは二つの異なる@pageルールを設定することができる唯一の方法です。

それ以外の場合はJavascriptを使用してください。