Question

我在网页上有一个嵌入式视频。该视频的标题下包含在h2标头标签中。该视频还包含P标签下的文本。我使视频响应，以便用户可以使用他们的手机观看视频。但是，我不知道如何使标题标记和段落标记响应。 h1标签对于手机尺寸来说太大了。我想根据屏幕的宽度缩小字体大小。如何在我的视频下对文本进行响应。

这是代码：

<!DOCTYPE html>
<html>
<head>
    <title>Responsive design</title>
<link type="text/css" rel="stylesheet" href="main.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.another-container {
    max-width: 600px;
    display: block;
    margin-left: auto;
    margin-right: auto
}

</style>
</head>
<body>
<div class="another-container">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ggh_y-33Eso" frameborder="0" allowfullscreen></iframe>
</div>
<h1>Learn HTML in 15 Minutes</h1>
<p> Learning html is the foundation for all great webmaster</p>
</div>

</body>
</html>

Answer 1

使用媒体查询处理h1和p标记样式。 http://www.w3schools.com/css/css_rwd_mediaqueries.asp

例如 @media（min-width：500px）和（max-width：600px）{ h1 { 颜色：紫红色; }

.desc:after {
  content:" In fact, it's between 500px and 600px wide.";
}
}
</style>

如何在视频下对H标签和P标签进行响应

1 个答案: