Materialize CSS Media指定了几个类来使图像和视频响应不同的大小。
【Materialise CSS媒体】响应式img：用于使图像根据屏幕尺寸调整大小。
video-container：用于具有嵌入式视频的响应式容器。
响应视频：用于使HTML5视频具有响应能力。
例子
让我们以一个示例在Materialize CSS Media中演示图像, 嵌入式视频和自适应视频为例。
<
!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.jquery.com/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="https://www.srcmini.com/oprweb/good-morning.jpg" alt="Good Morning Friends"/>
<
/div>
<
div class = "card-panel">
<
img src="https://www.srcmini.com/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">
<
videowidth = "300" height = "200" controls>
<
source src = "http://www.srcmini.com/movie.mp4" type = "video/mp4" />
Your browser does not support the video element.
<
/video>
<
/div>
<
/body>
<
/html>
立即测试
推荐阅读
- Materialise CSS教程介绍
- Materialise CSS颜色
- javaee|CSS基本用法
- web大学生个人网站作业模|div+css静态网页设计（三亚旅游网站设计——三亚旅游网页设计(6页) html网页设计期末大作业_网页设计平时作业）
- CSS|CSS box-flex
- 面试|前端面试题解答（九）
- 编程语言|JAVA代码审计实战班（详细授课目录曝光）
- web前端学习圈|我在淘宝做前端的这三年 — 第一年
- 前端|前端 --- JavaScript 语法基础