上一节:

  CSS 媒体查询（@media）

  • CSS媒体查询

    CSS2引入了媒体类型@media，CSS2中引入的规则使得为不同媒体类型定义不同的样式规则成为可能。 比如：您可以为计算机屏幕设置一组样式规则，一组用于打印机，一组用于手持设备，一组用于电视类型设备，等等。不幸的是，除了打印介质类型之外，这些介质类型从未得到设备的大量支持。CSS3引入了媒体查询，CSS3中的媒体查询扩展了CSS2媒体类型的想法：它们不是寻找一种类型的设备，而是查看设备的功能。媒体查询可用于检查许多内容，例如：
    • 视口的宽度和高度
    • 设备的宽度和高度
    • 方向（横向或纵向模式下的平板电脑/手机？）
    • 分辨率

  • 浏览器支持

    属性 Internet Explorer Chrome FireFox Safari Opera
    属性格式
    @media 9.0（含）以上 21.0（含）以上 3.5（含）以上 4.0（含）以上 9.0（含）以上

  • 媒体查询语法

    媒体查询由媒体类型组成，可以包含一个或多个表达式，这些表达式可以解析为true或false。
    @media not|only mediatype and (expressions) { CSS-Code; }
    如果指定的媒体类型与正在显示文档的设备类型匹配且媒体查询中的所有表达式都为真，则查询结果为true。当媒体查询为true时，将按照正常的级联规则应用相应的样式表或样式规则。除非您使用not或only运算符，否则媒体类型是可选的，默认为all。您还可以为不同的媒体使用不同的样式表：
    <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

  • CSS3媒体类型

    值 描述
    all 用于所有媒体类型的设备
    print 用于打印机
    screen 适用于电脑屏幕、平板电脑、智能手机等。
    speech 用于屏幕阅读器大声读出页面

  • 媒体查询简单示例

    使用媒体查询的一种方法是在样式表中放置一个备用CSS部分。如果视口宽度为480像素或更宽，则以下示例将背景颜色更改为lightgreen（如果视口小于480像素，背景颜色将为粉红色）： 
    @media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
    尝试一下
    以下示例显示了一个菜单，如果视口宽度为480像素或更宽，则该菜单将浮动到页面左侧（如果视口小于480像素，则菜单将位于内容的顶部）： 
    @media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}
    尝试一下

  • CSS @media参考

    有关所有媒体类型和功能/表达的完整概述，请查看CSS参考中的@media规则。

  • 更多示例

    让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。为了演示一个简单的示例，我们可以更改不同设备的背景颜色 
    /* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}
    尝试一下
    你想知道为什么我们使用992px和600px吗？它们就是我们所说的设备的“典型断点”(一般硬件设计商已经把各种设备（手机，平板，PC等）的屏幕做了很好的尺寸规划)。您可以在我们的响应式Web设计教程中阅读有关典型断点的更多信息。

  • 媒体查询菜单

    在此示例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同屏幕尺寸的设计上有所不同。 
    /* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
    尝试一下

  • 列的媒体查询

    媒体查询的常见用途是创建灵活的布局。在此示例中，我们创建的布局在四个，两个和全宽列之间变化，具体取决于不同的屏幕大小： 
    /* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
    尝试一下
    提示：创建列布局的更现代的方法是使用CSS Flexbox（请参阅下面的示例）。但是，Internet Explorer 10和早期版本不支持它。如果您需要IE6-10支持，请使用浮动（如上所示）。要了解有关Flexible Box布局模块的更多信息，请阅读我们的CSS Flexbox章节。要了解有关响应式Web设计的更多信息，请阅读我们的响应式Web设计教程。 
    /* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}
    尝试一下

  • 使用媒体查询隐藏元素

    媒体查询的另一个常见用途是隐藏不同屏幕尺寸的元素： 
    /* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
    尝试一下

  • 使用媒体查询更改字体大小

    您还可以使用媒体查询来更改不同屏幕大小的元素的字体大小： 
    /* 如果屏幕大小超过600px宽，请将字体大小设置为80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* 如果屏幕尺寸为600px或更小，请将字体大小设置为30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
    尝试一下

  • flex布局图库

    尝试一下

  • flex布局网站

    尝试一下

  • 方向：纵向/横向

    媒体查询还可用于根据浏览器的方向更改页面的布局。您可以拥有一组仅在浏览器窗口宽度超过其高度时应用的CSS属性，即所谓的“横向”方向： 
    @media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
    尝试一下

  • 最小宽度到最大宽度

    您还可以使用这些值来设置最小宽度和最大宽度。(max-width : ..) 和 (min-width: ..)例如，当浏览器的宽度介于600和900px之间时，请更改<div>元素的外观： 
    @media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
    尝试一下
    使用附加值：在下面的示例中，我们使用逗号向我们现有的媒体查询添加其他媒体查询（这将像OR运算符一样）：例如当宽度介于600px和900px之间或高于1100px时 - 改变外观 
     @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
    尝试一下
上一节: