CSS media queries

CSS Media Queries是一种响应式Web设计的核心技术，它可以根据不同的媒体（如屏幕、打印机等）和不同的设备（如电脑、平板、手机等）来改变网页的布局和样式，使网页能够在不同的设备上有更好的呈现效果。下面是CSS Media Queries的完整攻略：

CSS Media Queries 的语法

Media Queries 基本的语法如下：

@media mediatype and (media feature){
  // CSS rules
}

其中，mediatype 指的是媒体类型，常用的有 screen、print、all 等。Media feature 指的是媒体特性，比如宽度、高度、分辨率等。这些媒体特性可以用来判断当前设备的状态，从而改变网页的样式和布局。

例如，下面的代码表示在屏幕宽度小于 600 像素时应用 CSS 样式：

@media screen and (max-width: 600px) {
  // CSS rules
}

可以使用逗号将多个媒体类型结合在一起：

@media screen, print {
  // CSS rules
}

CSS Media Queries 的应用场景

CSS Media Queries 可以应用在不同的场景中，使得网站在不同的设备上都有更好的呈现效果：

1. 移动设备适配

移动设备一般尺寸较小，如果不适配可能会出现屏幕过大或者宽度超出等情况。可以使用 CSS Media Queries 为移动设备设置特定的样式，以达到更好的呈现效果。

例如：

@media only screen and (max-width: 768px) {
  /* 移动设备样式 */
}

2. 打印样式

打印机的屏幕与浏览器的屏幕有所不同，使用 CSS Media Queries 可以为不同的打印机设置不同的样式，使得打印效果更佳。

例如：

@media print {
  /* 打印机样式 */
}

CSS Media Queries 的示例说明

示例1：响应式导航栏

下面是一个简单的响应式导航栏，当屏幕宽度小于 768 像素时，导航栏的链接变为下拉菜单形式：

@media only screen and (max-width: 768px) {
  /* 小屏幕样式 */
  .navbar ul {
    display: none;
  }
  .navbar li.icon {
    display: inline-block;
  }
  .navbar li a {
    display: block;
    text-align: center;
  }
  .navbar li.dropdown {
    display: block;
    width: 100%;
  }
}

示例2：响应式图片

下面是一个使用 CSS Media Queries 实现的响应式图片，当屏幕宽度小于 768 像素时，图片宽度变为 100%：

@media only screen and (max-width: 768px) {
  /* 小屏幕样式 */
  .image {
    width: 100%;
  }
}