CSS Media Type -媒介(螢幕、列印..)輸出的指定

在同一樣式表裡,使用CSS Media Type,可以對同一個元素分別為顯示、列印、行動裝置指派不同的呈現樣式。

CSS語法

@media [ all | aural | braille | embossed |handheld | print | projection |screen |tty | tv ]

CSS實例:

@media screen
  {
     /* 對螢幕顯示用紅色字體與大小 */
  p.try {font-family:verdana,sans-serif;font-size:14px;color:red;}
  }

@media screen and (min-width: 384px) {
    /* 只對最小384px螢幕產生作用 */
}
@media print
  {
      /* 對列印用黑色字體與大小 */
  p.try {font-size:20px;color:#000;}
  }
@media screen,print
  {
      /* 螢幕、列印上字體 */
  p.try {font-weight:bold;}
  }


您也可以將不同媒介的CSS個別寫在獨立的檔案中,再連結進入網頁黨內:
<head>
<link rel="stylesheet" media="screen" href="檔名a.css">
<link rel="stylesheet" media="print" href="檔名b.css">
您甚至可以指定螢幕寬度專用的css檔:
<link rel="stylesheet" media="screen and (min-width: 534px)" href="檔名a.css">