CSS3 基础（014_媒体查询）

最新推荐文章于 2024-08-17 12:52:43 发布

柯南道尔2606

最新推荐文章于 2024-08-17 12:52:43 发布

阅读量526

点赞数

分类专栏： CSS 文章标签： css3

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

原始网址：http://www.w3schools.com/css/css3_mediaqueries.asp

翻译：

CSS3 媒体类型（CSS3 Media Queries）

CSS2 中介绍的媒体类型（CSS2 Introduced Media Types）

@media 规则出现于 CSS2，这使得对不同媒体类型定义不同样式成为可能。
例如：你可能针对电脑屏幕、打印机、手持设备、电视类设备等等有各自专门的样式规则的设置。
不幸的是，除了打印媒体类型，很多媒体类型都不能受设备的良好支持。

CSS3 介绍媒体查询（CSS3 Introduces Media Queries）

CSS3 中的媒体查询是对 CSS2 媒体类型概念的扩展：以接受设备的性能替代查看设备的类型。
媒体查询可用以检查多个事项，例如：

视口的宽高
设备的宽高
定位（是 tablet/phone in landscape 还是 portrait mode）
分辨率

使用媒体查询为 tablets、iPhone 以及 Androids 传递定制样式表是很流行的技术。

Browser Support

表格中的数字是第一版全面支持 @media 规则的浏览器。

属性（Property）
@media	21.0	9.0	3.5	4.0	9.0

媒体查询语法（Media Query Syntax）

媒体查询由媒体类型和可包含一个或多个被解析为 true 或 false 的表达式组成。

@media not|only mediatype and (expressions) {
    CSS-Code;
}

如果指定的媒体类型与当前呈现文档的设备类型匹配，查询结果为 true，媒体查询内的所有表达式为 true 。当媒体查询为 true 的时候，对应的样式表或样式规则被应用，遵从常规的级联规则。
除非你使用 not 或 only 操作符，否则，媒体类型将是可选的，all 类型将起作用。
对不同的媒体，你也可以有不同的样式表：

 <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 媒体类型（CSS3 Media Types）

值（Value）	描述（Description）
all	对所有媒体类型设备可用
print	对打印机可用
screen	对 computer screens、tablets、smart-phones 等等可用
speech	对能够“朗诵”网页的阅读器可用

媒体查询简单示例（Media Queries Simple Examples）

使用媒体查询的方式之一是在你的样式表中有适当可选的 CSS 部分。
下列示例在视口的宽度为 480 个像素或更宽的时候将背景色改为浅绿（当视口的宽度小于 480 像素的时候，背景色为粉色）：

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: pink;
}

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>
    <h1>Resize the browser window to see the effect!</h1>
    <p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>

下列示例在视口的宽度为 480 个像素或更宽的时候以浮动于页面左侧的方式呈现菜单（当视口的宽度小于 480 个像素的时候，菜单位于内容顶部呈现）：

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {
    overflow: auto;
}

#main {
    margin-left: 4px;
}

#leftsidebar {
    float: none;
    width: auto;
}

#menulist {
    margin: 0;
    padding: 0;
}

.menuitem {
    background: #CDF0F6;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    list-style-type: none;
    margin: 4px;
    padding: 2px;
}

@media screen and (min-width: 480px) {
    #leftsidebar {
        width: 200px;
        float: left;
    }
    #main {
        margin-left: 216px;
    }
}
</style>
</head>
<body>
    <div class="wrapper">
        <div id="leftsidebar">
            <ul id="menulist">
                <li class="menuitem">Menu-item 1</li>
                <li class="menuitem">Menu-item 2</li>
                <li class="menuitem">Menu-item 3</li>
                <li class="menuitem">Menu-item 4</li>
                <li class="menuitem">Menu-item 5</li>
            </ul>
        </div>
        <div id="main">
            <h1>Resize the browser window to see the effect!</h1>
            <p>
                This example shows a menu that will float to the left of the
                page if the viewport is 480 pixels wide or wider. If the viewport is
                less than 480 pixels, the menu will be on top of the content.
            </p>
        </div>
    </div>
</body>
</html>

CSS3 @media Reference

有关所有媒体类型和特性/表达式的总览，请在 CSS 参照中查看 @media 规则。

柯南道尔2606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 基础（014_媒体查询）

原始网址：http://www.w3schools.com/css/css3_mediaqueries.asp翻译：CSS3 媒体类型（CSS3 Media Queries）CSS2 中介绍的媒体类型（CSS2 Introduced Media Types）@media 规则出现于 CSS2，这使得对不同媒体类型定义不同样式成为可能。例如：你可能针对电脑屏幕、打印机、手持设备、电视类设备等等有各
复制链接

扫一扫

专栏目录