2

私は以下のようなCSSを持っています、

@media screen {
    .page{}
}
@media print {
    .page {}
}


body
{
    background-color:#ffffe0;
    margin-left:20px;
    margin-top:50px;
    margin-bottom:50px;
}

select
{
    font-size     : 24pt; font-family: 'MS UI Gothic' ; 
}

同じ CSS を使用したいのですが、body 内の値だけを変更する必要があります。値は次のとおりです。

body
{
    background-color:#ffffe0;
    margin-left:5px;
    margin-top:0px;
    margin-bottom:0px;
}

このような新しいクラスを追加してみました。これは正しいですか ？または、異なるクラスに 2 つの異なるボディを使用する方法。誰か教えてください。

私はこのようにしてみました

@media screen {
        .page{}
    }
    @media print {
        .page {}
    }


    body
    {
        background-color:#ffffe0;
        margin-left:20px;
        margin-top:50px;
        margin-bottom:50px;
    }

    select
    {
        font-size     : 24pt; font-family: 'MS UI Gothic' ; 
    }

@media screen2 {
        .page2{}
    }
    @media print2 {
        .page2 {}
    }


    body
    {
        background-color:#ffffe0;
        margin-left:20px;
        margin-top:50px;
        margin-bottom:50px;
    }

    select
    {
        font-size     : 24pt; font-family: 'MS UI Gothic' ; 
    }

しかし毎回最初の体だけしか撮っていません。

4

2 に答える 2

1

わかりました、これが最初のビットです。@Adrian が言ったように、ページには body 要素を 1 つしか持てません。次に、@media と @print は、通常の画面 (デスクトップ、ラップトップなど) と印刷 (たとえば、印刷ボタンをクリックしたとき) にそれぞれ対応します。だから、あなたがする必要があるのは簡単です。body タグを他のすべてのメディア クエリの外に配置します。

body {
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}

@media screen {
.page{}

rest of your styles and classes...

}
@media print {
body {
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
.page {}

rest of your styles and classes...

}
and so on...

また

これを行う...

@media screen {
body {
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
.page{}
}
@media print {
body {
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
.page {}
}

ただし、印刷タイプ css は、印刷中にのみ表示されることに注意してください。メインサイトの表示には表示されません。

于 2013-04-02T16:46:45.180 に答える