网页设计 – 媒体查询

什么是媒体查询？

CSS3 中引入了媒体查询，它是一种CSS技术。

当媒体的页面展示满足CSS中 @media 规则定义的条件是，页面回加载该条件下的CSS样式内容。

示例

例如，当浏览器窗口是 600px 或更小时，页面背景颜色为浅蓝色：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

试一试

添加断点

在先前的示例中，有一个包含行和列的网页示例，但是这样的响应式网页在小屏幕上看显示效果并不好。

通过媒体查询，我们可以在CSS样式表中添加一个断点，实现更好的样式适配，例如达到以下效果：

桌面设备

手机设备

使用媒体查询在 768px 处添加断点，设置当屏幕（浏览器窗口）小于 768px 时，每列的宽度应为 100％：

/* 默认PC屏幕显示: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* 手机屏幕显示: */
    [class*="col-"] {
        width: 100%;
    }
}

试一试

移动优先设计

为了针对移动设备更好的加载和展示页面，页面在移动设备上加载相对更快，CSS编写时建议以移动样式优先。

例如：当屏幕宽度小于 768px 时，设置CSS样式顺序。我们就这样进行了“移动优先”的设计原则：

/* 针对手机屏幕： */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* 针对桌面屏幕： */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

试一试

另外的媒体查询断点

你可以根据不同屏幕需要添加断点，例如兼顾电脑屏幕，平板电脑，手机的页面展示效果如下：

桌面设备

平板设备

手机设备

假定，平白显示屏幕为 600px 到768px之间，这是我们添加媒体查询，设置新的样式：

/* 手机屏幕: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* 平板屏幕: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* 电脑屏幕: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

虽然这里定义的@media only screen and (min-width: 600px)中内容和其下面的一样，但实际上你可以根据自己需要进行设置。

HTML 实例

对于台式机：

第一和第三部分都会跨越 3 列。中间部分将跨越 6 列。

对于平板电脑：

第一部分将跨越 3 列，第二部分将跨越 9 列，第三部分将显示在前两部分的下方，并将跨越 12 列：

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

试一试

常用的设备断点

媒体设备高度和宽度不同的屏幕和设备有很多，不可能每种都设定一个展示样式。为此，通常我们只需要将常用的那些显示分辨率进行针对设定：

示例

/* 超小型设备（电话，600px 及以下） */
@media only screen and (max-width: 600px) {...} 

/* 小型设备（纵向平板电脑和大型手机，600 像素及以上） */
@media only screen and (min-width: 600px) {...} 

/* 中型设备（横向平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {...} 

/* 大型设备（笔记本电脑/台式机，992px 及以上） */
@media only screen and (min-width: 992px) {...} 

/* 超大型设备（大型笔记本电脑和台式机，1200px 及以上） */
@media only screen and (min-width: 1200px) {...}

试一试

屏幕显示方向：横屏/竖屏

结合CSS媒体查询，可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

示例

如果方向为横向模式（landscape mode），则网页背景为浅蓝色：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

试一试

用媒体查询设置元素是否隐藏

媒体查询的另一种常见用法是在不同屏幕尺寸上对元素进行隐藏：

示例

/* 如果屏幕尺寸为 600 像素或更小，请隐藏该元素 */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

试一试

用媒体查询定义不同字体

您还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：

示例

/* 如果屏幕尺寸为 601px 或更大，请将 <div> 的 font-size 设置为 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* 如果屏幕尺寸为 600px 或更小，请将 <div> 的 font-size 设置为 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

试一试

CSS @media 参考手册

有关所有媒体类型和特性/表达式的更详细的说明，可以查看CSS @media 属性。