CSS 媒体类型 ，相应式布局使用

CSS 媒体类型   应用：相应式布局使用，特殊设备效果

 

一、媒体类型了解

 

解释：媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，这使得你用不同的设备看到的效果是不一样的。

          网页端，手机端，pc端，app端，打印机，盲人机等等。并且一些css属性是在特定的媒介设备才会有的。

应用：

一些CSS属性只设计了某些媒体。例如"voice-family"属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如，"font-size"属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans - serif字体（无倒角）比较适合在屏幕上阅读，而serif字体（有倒角）更容易在纸上阅读。

 

语法：@media   媒介{

                选择符 {css样式设置}

            }

 

媒体类型	描述
all	用于所有的媒体设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv	用于电视机类型的设备。

 

 

 

二、媒体类型应用

    在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，

    将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体：

<style>
@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}
</style>