CSS3中的媒体类型

程序员文章站 2022-05-29 15:29:17

...

W3C总共列出了10钟媒体类型，如下：
CSS3中的媒体类型

媒体类型的引用

通过link标签中的media属性来指定不同的媒体类型，如：

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

一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。

@importurl(reset.css) screen;   
@importurl(print.css) print;

在中的

<head>
<style type="text/css">
    @importurl(style.css) all;
</style>
</head>

跟@import有点类似，具有两种形式

@media screen {
   选择器{/*你的样式代码写在这里…*/}
}

在head标签中引用

<head>
<style type="text/css">
    @media screen{
    选择器{/*你的样式代码写在这里…*/}
}
</style>
</head>

@media 媒体类型and （媒体特性）{你的样式}

如下示例代码：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面的意思：当屏幕小于或等于480px时，页面中的广告模块将被隐藏。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。
多屏幕的使用and拼接即可。
当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。



@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

设备宽度Device Width
not关键字取反
only关键词只针对某一类型设备