media type(媒体类型)与media query(媒体查询)简介及使用方法介绍

媒体类型和媒体查询是用于响应式设计的重要概念，可以让我们根据设备的屏幕宽度和其他条件来修改网页的样式和布局。下面是媒体类型和媒体查询的详细介绍及使用方法：

媒体类型(Media Type)

媒体类型是用来描述文档呈现特定媒体类型的方式，比如打印机、屏幕、手持设备等。我们可以通过使用媒体查询为不同媒体类型的设备设置不同的样式。

在CSS中，使用@media规则来定义媒体查询，常见的媒体类型包括：

• all: 适用于所有媒体设备。
• print：应用于打印机或打印预览。
• screen: 应用于计算机屏幕、平板电脑、智能手机等设备。
• speech: 应用于屏幕阅读器等语音合成器设备。

示例一：设置打印样式

@media print {
  /* 在打印时将背景颜色设置为白色 */
  body {
    background-color: #fff;
  }

  /* 隐藏导航栏和页脚 */
  .navbar, .footer {
    display: none;
  }
}

示例二：修改移动设备的样式

@media screen and (max-width: 768px) {
  /* 如果屏幕宽度小于768px，将页面中的元素字体大小修改为16px */
  body {
    font-size: 16px;
  }

  /* 调整图片大小和位置 */
  img {
    width: 100%;
    margin: 20px 0;
  }
}

媒体查询(Media Query)

媒体查询可以让我们基于不同设备的特定条件应用不同的样式。媒体查询使用CSS中的@media规则来实现。媒体查询可以包括不同的条件，如设备屏幕宽度、高度、方向、分辨率等。

要使用媒体查询，我们需要设置条件列表并将其用括号包含起来，例如@media screen and (max-width: 768px)。在条件列表中，我们可以使用关键字and来包含多个条件，也可以使用逗号将它们分开。

在CSS中，我们可以使用媒体查询来控制样式的多个方面，例如字体大小、行距、布局、颜色等。

示例一：响应式布局

/* 当屏幕宽度小于等于768px时，调整布局 */
@media screen and (max-width: 768px) {
  /* 将左右两列设置为堆叠在一起的形式 */
  .col {
    width: 100%;
    display: block;
    margin: 10px 0;
  }

  /* 调整字体大小 */
  h1, h2, h3 {
    font-size: 1.5rem;
  }
}

示例二：调整颜色与字体

/* 当屏幕的高度小于等于500px时，调整字体和颜色 */
@media screen and (max-height: 500px) {
  /* 修改页面中所有标题的字体大小 */
  h1, h2, h3, h4, h5, h6 {
    font-size: 24px;
  }

  /* 修改正文字体颜色为黑色 */
  body {
    color: #000;
  }
}

综上所述，媒体类型和媒体查询是响应式设计中不可或缺的工具，可以帮助我们根据不同设备的特定条件来修改样式和布局。