CSS 媒体类型

CSS中的媒体类型语法允许你指定具体的css样式在指定的媒体上呈现。这一方式解决了在不同大小屏幕，媒体类型让也页面可以适配到制定的定义样式。

媒体类型 Media Types

以下的表格中展示了不同的媒体类型以及对应的CSS版本，兼容性和描述说明。

@media 规则

CSS中的 @media 规则语法允许在相同样式表文件中为不同媒体设置不同的样式。例如以下的示例：

@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;}
}

本例中定义了screen, print，以及screen,print类型下p元素中test样式类的字体展示效果。

不同屏幕大小显示设置

我们可以通过@media screen来实现网页中的自适应，也就是让网页在不同屏幕上根据样式定义显示不同的效果。

例如我们常常需要网页兼容电脑屏幕显示以及平板或手机屏幕显示，这是我们可以通过@media screen来定义不同屏幕大小对应元素使用的的css样式来实现。

首先我们需要在网页头部加入如下的<meta>内容。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

代码参数解释：

• width = device-width：宽度等于当前设备的宽度
• height = device-height：高度等于当前设备的高度
• initial-scale：初始的缩放比例（默认设置为1.0）
• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

CSS3 Media screen编写

@media screen and (max-width: 767px){
    body{
        background: #000;
    }
}
@media screen and (min-width: 768px){
    body{
        background: #060;
    }
}

上面的代码表示如果屏幕最大宽度不超过767px时，body的背景色为#000，如果屏幕的最小宽度不小于768px时，body的背景色为#060;

试一试