CSSメディアタイプの使用方法-CSSチュートリアル-php.cn

CSSメディアタイプの使用方法

不言

リリース： 2018-12-07 17:07:06

オリジナル

3399 人が閲覧しました

今日の記事では、CSS メディアタイプの使用法を紹介します。メディアタイプを使用すると、さまざまなメディアでファイルを表示する方法を指定できます。具体的なコンテンツを見てみましょう。

CSSメディアタイプの使用方法

Webサイトによっては、Webページのエラーが印刷時にレイアウトが折れるなど予期せぬ形で表示される場合がありますが、メディアの種類によっては設定可能です。回避印刷用のページを作成したり、プロジェクターに出力したりできることを意味します。

CSS メディアタイプを使用するには?

メディアタイプは 2 つの方法で記述できます。

最初の方法

<link rel="stylesheet" href="sample.css" type="text/css" media="screen">

ログイン後にコピー

2番目の方法

@media screen{
  /*screen的内容*/
}

ログイン後にコピー

最初の方法では、を使用して、メディアタイプに基づいて適用されるCSSを変更します。

2つ目は、メディアタイプごとの設定をCSSで記述する方法です。

CSSコードの量が多く、変更があった場合に変更が難しい場合があるため、1つ目の方法を使用することを推奨します。 , ですが、今回は 2 番目の方法を例として CSS メディアタイプを紹介します。

CSS

screen (画面)

print (印刷)# で一般的に使用されるいくつかのメディアタイプを簡単に見てみましょう。

##tv(TV)

projection(プロジェクター)

all(all)

2 つのメディアタイプを使用する場合は、カンマで区切ることができます。具体的な例での

コードは次のとおりです

HTMLコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSSメディアタイプの使用方法</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <h1>Sample</h1>
    <p>根据媒体的不同，背景颜色会改变</p>
    <p>screen : 平常显示 : #d9534f（红色）</p>
    <p>print : 打印时显示: #5bc0de（蓝色）</p>
  </body>
</html>

ログイン後にコピー

CSSコード

sample.css

@media all{
  p{
    color:#000000;
  }
}
@media print{
  body{
    color: #5bc0de;
  }
}
@media screen{
  body{
    color: #d9534f;
  }
}

ログイン後にコピー

上記のコードを実行すると、次の効果がブラウザページに表示されます

#サンプルは赤色です

#続行時プレビューを印刷すると、ブラウザに次の効果が表示されます CSSメディアタイプの使用方法

サンプルが青色になります

CSSメディアタイプの使用方法

以上がCSSメディアタイプの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。