為其他裝置新增樣式表(stylesheets)

From Joomla! Documentation

This page is a translated version of the page Adding stylesheets for other output devices and the translation is 100% complete.

Other languages:
অসমীয়া • ‎български • ‎বাংলা • ‎Deutsch • ‎English • ‎español • ‎فارسی • ‎français • ‎हिन्दी • ‎Nederlands • ‎português • ‎português do Brasil • ‎русский • ‎中文(台灣)‎

要使用 CSS 樣式表,可以 it is possible to use a set of directives(styles) depending upon the device being used to browse web pages.

媒體類型

可以識別的媒體類型有:

  • all - 適用於所有裝置
  • aural - For speech synthesizers.
  • braille - Intended for braille tactile feedback devices.
  • embossed - 用於 paged braille printers.
  • handheld - 用於手持裝置
  • print - 用於組織印表機輸出頁面
  • projection - 用於 projected presentations。例如投影裝置或是 print to transparencies.
  • screen - 主要用於彩色電腦螢幕
  • tty - Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
  • tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

範例

您可以使用底下的語法,指定 CSS declaration媒體類型

@media print {
  body { 
    font-size: 12pt;
    font-color: #000000; 
  }
}

要指定多個媒體類型到多個declaration style:

@media print, handheld{
  body { 
    font-size: 12pt;
    font-color: #000000;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

指令可以被用於主要的 CSS 檔案或是在另一個給媒體類型用的樣式表。There must be an include to the CSS file in the templates <head> section (以下是從 Joomla! Beez 佈景主題取得):

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />

include 樣式表,推薦的方式是:

<?php
$document = JFactory::getDocument();
 $tpath = $this->baseurl . '/templates/' . $this->template;
$document->addStyleSheet( $tpath . '/css/print.css', 'text/css', 'print'); // arguments: $path, $type, $media
?>

用這個方式,您可以確保樣式表被加到文件中,也可以讓外掛使用(亦即,用來組合或是壓縮樣式表)