Matarialize中文技术社区-Materialize专栏-使用 Materialize CSS 框架中的 Media 类：详解与示例

使用 Materialize CSS 框架中的 Media 类：详解与示例

Media,媒体

在现代的 Web 开发中，媒体内容（如图片、视频、响应式媒体对象等）是网页设计的重要组成部分。Materialize CSS 提供了一套方便的 Media 类，帮助开发者轻松处理媒体内容的布局与展示。通过这些类，你可以快速构建响应式图片、视频和其他媒体元素，同时确保它们在不同设备上具有最佳的表现形式。

本文将详细介绍 Materialize CSS 中 Media 类的使用方法，并通过多个示例展示它们的实际应用。

1. 响应式图片

1.1 `responsive-img` 类

Materialize 提供了 responsive-img 类，使图片根据设备的屏幕尺寸自动调整大小，确保图片在所有设备上都具有最佳显示效果。这个类会自动调整图片的宽度，确保图片宽度不会超出父容器的宽度，同时保持图片的原始比例。

示例：

<div class="container">
  <img src="https://via.placeholder.com/800x400" alt="示例图片" class="responsive-img">
</div>

在这个示例中，图片会根据父容器的宽度自动调整大小，而不会失真。这对于不同屏幕尺寸的设备（如手机、平板和桌面）尤为重要。

2. 媒体对象（Media Object）

2.1 `media` 类

在 Materialize 中，媒体对象指的是包含图像、视频或其他媒体元素与文本内容的组合。media 类允许你创建响应式的媒体列表，特别是在创建社交媒体帖子、评论区等地方时非常实用。

媒体对象布局通常分为两部分：

左侧的媒体元素（如图片、图标）。
右侧的文本或其他内容。

Materialize 提供了 .media 类来处理这一布局。

示例：

<div class="media">
  <a href="#">
    <img src="https://via.placeholder.com/100x100" alt="媒体图片" class="circle">
  </a>
  <div class="media-body">
    <h5>媒体标题</h5>
    <p>这是媒体对象的内容描述。你可以在这里放置文本、链接等信息。</p>
  </div>
</div>

在这个示例中，图片位于左侧，文本位于右侧。media-body 类用于将文本与媒体元素分离并排布在右侧。这种布局非常适合用于博客、评论和社交媒体平台。

3. 嵌入式视频

3.1 `video-container` 类

Materialize CSS 提供了 video-container 类，用于嵌入响应式视频。这个类可以确保视频内容根据屏幕尺寸自适应调整，并在不同设备上有良好的观看体验。

示例：

<div class="video-container">
  <iframe width="853" height="480" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>

在这个示例中，video-container 类使嵌入的 YouTube 视频在小屏幕设备上也能按比例缩放。无论是桌面端还是移动端，视频都能保持良好的显示效果。

4. 媒体响应式类

4.1 `hide-on-small-only` 和 `show-on-medium-and-up`

Materialize 提供了一些响应式辅助类，帮助你根据设备尺寸控制媒体的显示与隐藏。例如，hide-on-small-only 类可以让媒体内容在小屏幕设备（小于600px）上隐藏，而 show-on-medium-and-up 则可以确保媒体内容仅在中等及更大的屏幕上显示。

示例：

<div class="container">
  <img src="https://via.placeholder.com/800x400" alt="大屏幕显示图片" class="responsive-img hide-on-small-only">
  <img src="https://via.placeholder.com/400x200" alt="小屏幕显示图片" class="responsive-img show-on-small-only">
</div>

在这个示例中，较大的图片会在大屏幕设备上显示，而较小的图片则在小屏幕设备上显示。这可以帮助你根据不同设备提供最佳的图片分辨率，提升用户体验。

5. 视觉优化类

5.1 `materialboxed` 类

Materialize 提供了一个有趣的效果类 materialboxed，它允许你为图片添加点击放大效果，类似于 Lightbox 的功能。当用户点击图片时，图片会以动画形式放大，并覆盖页面的其他内容。这在展示相册或产品图片时非常实用。

示例：

<div class="container">
  <img src="https://via.placeholder.com/400x200" alt="可放大图片" class="materialboxed responsive-img">
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.materialboxed');
    var instances = M.Materialbox.init(elems);
  });
</script>

在这个示例中，materialboxed 类使图片具备点击放大效果，同时保持响应式特性。当用户点击图片时，图片会自动放大，并可以拖动查看。

6. 圆形图片

6.1 `circle` 类

Materialize 提供了 circle 类，方便你将图片裁剪成圆形。这个类非常适合用于头像、图标或其他需要圆形展示的图片。

示例：

<div class="container">
  <img src="https://via.placeholder.com/150x150" alt="圆形图片" class="circle responsive-img">
</div>

在这个示例中，图片将被裁剪成圆形，同时保持响应式特性。

7. 结合卡片和媒体

Materialize 的卡片组件与媒体对象结合使用时，可以创建更加丰富的内容布局，特别是在展示图片与描述信息时，这种组合非常有用。

示例：

<div class="card">
  <div class="card-image">
    <img src="https://via.placeholder.com/800x400" alt="卡片图片" class="responsive-img">
    <span class="card-title">卡片标题</span>
  </div>
  <div class="card-content">
    <p>这是卡片内容。你可以在这里放置一些描述文字。</p>
  </div>
  <div class="card-action">
    <a href="#">查看更多</a>
  </div>
</div>

在这个示例中，卡片包含了一张响应式图片和一些描述内容，同时还提供了一个链接操作按钮。图片会根据屏幕尺寸调整大小，而卡片布局保持一致。

8. 完整示例代码

以下是一个完整的示例页面，展示了 Materialize CSS 中各种 Media 类的使用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize CSS Media 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4 class="center-align">Media 类示例</h4>

    <!-- 响应式图片 -->
    <div class="section">
      <h5>响应式图片</h5>
      <img src="https://via.placeholder.com/800x400" alt="示例图片" class="responsive-img">
    </div>

    <!-- 媒体对象 -->
    <div class="section">
      <h5>媒体对象</h5>
      <div class="media">
        <a href="#">
          <img src="https://via.placeholder.com/100x100" alt="媒体图片" class="circle">
        </a>
        <div class="media-body">
          <h6>媒体标题</h6>
          <p>这是媒体对象的内容描述。</p>
        </div>
      </div>
    </div>

    <!-- 嵌入式视频 -->
    <div class="section">
      <h5>嵌入式视频</h5>
      <div class="video-container">
        <iframe width="853" height="480" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>

    <!-- 圆形图片 -->
    <div class="section">
      <h5>圆形图片</h5>
      <img src="https://via.placeholder.com/150x150" alt="圆形图片" class="circle responsive-img">
    </div>

    <!-- 卡片与媒体结合 -->
    <div class="section">
      <h5>卡片与媒体结合</h5>
      <div class="card">


        <div class="card-image">
          <img src="https://via.placeholder.com/800x400" alt="卡片图片" class="responsive-img">
          <span class="card-title">卡片标题</span>
        </div>
        <div class="card-content">
          <p>这是卡片内容。你可以在这里放置一些描述文字。</p>
        </div>
        <div class="card-action">
          <a href="#">查看更多</a>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

结论

Materialize CSS 提供了一系列强大的 Media 类，帮助开发者轻松处理图片、视频、媒体对象等内容的展示和布局。通过这些类，你可以创建出响应式、灵活且美观的媒体展示效果，而无需编写复杂的 CSS 代码。

评论区

评论列表

{{ rItem.user.nickname || rItem.user.username }} @ {{ rItem.toUser.nickname || rItem.toUser.username }}

使用 Materialize CSS 框架中的 Media 类：详解与示例

1. 响应式图片

1.1 responsive-img 类

2. 媒体对象（Media Object）

2.1 media 类

3. 嵌入式视频

3.1 video-container 类

4. 媒体响应式类

4.1 hide-on-small-only 和 show-on-medium-and-up

5. 视觉优化类

5.1 materialboxed 类

6. 圆形图片

6.1 circle 类

7. 结合卡片和媒体

8. 完整示例代码

结论

{{operTitle}}

1.1 `responsive-img` 类

2.1 `media` 类

3.1 `video-container` 类

4.1 `hide-on-small-only` 和 `show-on-medium-and-up`

5.1 `materialboxed` 类

6.1 `circle` 类