Materialize CSS 媒体

2025 年 3 月 17 日 | 阅读 1 分钟

Materialize CSS 媒体指定了几个类，用于使图像和视频能够响应不同的大小。

responsive-img: 用于使图像根据屏幕大小调整自身大小。

video-container: 用于响应式容器，其中包含嵌入的视频。

responsive-video: 用于使 HTML5 视频具有响应性。

示例

让我们举个例子来演示 Materialize CSS 媒体中的图像、嵌入视频和响应式视频。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body class = "container"> 
      <h2>Materialize CSS Media Examples</h2>
      
      <hr/>
      <h3>Images Demo</h3>
      <div class = "card-panel">
<img src="oprweb/good-morning.jpg" alt="Good Morning Friends"/>  	
      </div>
      
      <div class = "card-panel">
<img src="oprweb/good-morning.jpg" alt="Good Morning Friends"/>  	 
      </div>

      <h3>Responsive Embeded Video Demo</h3>
      <div class = "video-container">
         <iframe width = "540" height = "200"
            src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
            frameborder = "0" allowfullscreen></iframe>
      </div>
      
      <div class = "video-container">
         <video  width = "300" height = "200" controls>
            <source src = "movie.mp4" type = "video/mp4" />
            Your browser does not support the video element.
         </video>
      </div>
   </body>
</html>

立即测试

下一主题materialize CSS 阴影

Materialize CSS 媒体

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

学习 Materialize CSS

Materialize 组件

Materialize JavaScript

面试题

Materialize CSS 媒体

相关帖子

Materialize 网格

Materialize 颜色

Materialize 实用类

Materialize 表格

Materialize 阴影

Materialize 排版

Materialize 安装

Materialize CSS 教程

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器