CSS3 Media查询- 优化你的响应式设计

什么是CSS3 Media查询？

在过去的几年里，移动设备已成为人们最重要的媒介。越来越多的人使用移动设备浏览网站，这就需要我们的网站能够适应不同的屏幕大小和分辨率。这时候就要用到CSS3 Media查询！

CSS3 Media查询是一种CSS技术，它允许我们根据不同的设备、屏幕大小和分辨率来定义不同的样式。通过使用Media查询，我们可以为不同的设备提供不同的样式表。这样，我们就可以在不同的设备上呈现最佳的用户体验。

如何使用CSS3 Media查询？

首先，我们需要在样式表中定义Media查询。Media查询由@media关键字和一对大括号组成。在大括号中，我们定义了一组样式规则，这些规则只会在特定条件下生效。例如，我们可以在样式表中添加以下代码：

@media screen and (max-width: 768px) {
  body {
    background-color: yellow;
  }
}

上面的代码表示，当屏幕宽度小于等于768px时，背景颜色将变成黄色。

Media查询的条件

Media查询的条件由媒体类型和媒体特性组成。媒体类型指的是我们要适应的媒体类型，常见的有screen、print、speech等。而媒体特性则是指我们要适应的屏幕大小、分辨率等特性。常见的媒体特性包括：

width：屏幕宽度
height：屏幕高度
device-width：设备宽度
device-height：设备高度
orientation：屏幕方向（横向或纵向）
resolution：屏幕分辨率

Media查询的实例

下面是一些Media查询的实例：

调整字体大小

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}
@media screen and (min-width: 769px) and (max-width: 992px) {
  body {
    font-size: 16px;
  }
}
@media screen and (min-width: 993px) {
  body {
    font-size: 18px;
  }
}

上面的代码表示，在不同的屏幕宽度下，字体大小也会发生变化。

调整图片大小

@media screen and (max-width: 480px) {
  img {
    width: 100%;
    height: auto;
  }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  img {
    width: 50%;
    height: auto;
  }
}
@media screen and (min-width: 769px) {
  img {
    width: 30%;
    height: auto;
  }
}

上面的代码表示，在不同的屏幕宽度下，图片大小也会发生变化。

隐藏某些元素

@media screen and (max-width: 480px) {
  .desktop-only {
    display: none;
  }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  .mobile-only {
    display: none;
  }
}

上面的代码表示，在不同的屏幕宽度下，某些元素会被隐藏。