html5视频上的CSS文本移动问题答案

【问题标题】：CSS Text over html5 video Mobile Issuehtml5视频上的CSS文本移动问题
【发布时间】：2018-09-01 17:33:18
【问题描述】：

我正在处理 Html5 视频上的此文本和按钮，并且我试图不使用任何媒体查询来解决我遇到的移动问题。问题是我正在使用 bootstrap 4 的 car-image-overlay 类来显示包含视频文本的 div。使用其他引导程序 4 类将中心左对齐和全部对齐。但是在移动设备（例如：iphone 5e）中，一切都中断了，按钮、h1 和 p 似乎没有调整，因此它覆盖了整个视频，并且像这张图片一样超出了框架。我认为引导程序会解决这个问题，但也许我没有以正确的方式做到这一点。我也在用col-lg和xs，还是没用

.cta-video-section .cta-video-container {
  position: relative;
}
.cta-video-section .cta-video-container video {
  height: auto;
  vertical-align: middle;
  width: 100%;
}
.cta-video-section .cta-video-container h2 {
  color: white;
}
.cta-video-section .cta-video-container p {
  color: white;
  font-family: "Open Sans", sans-serif;
  font-size: 1.1rem;
}
.cta-video-section .cta-video-container button {
  white-space: normal;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>



    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">


</head>

<body>

    <div class="container">
<div class="cta-video-section">
        <div class="cta-video-container">
                <video id="cta-video" autoplay loop muted>
                    <source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">                Your
                    browser does not support the video tag.
                </video>
                <div class="card-img-overlay d-flex align-items-center" id="cta-video-texts">
                        <div class="row">
                            <div class="text-left col-xs-1 col-lg-4 ">
                                <h2 class="card-title ">H2 Locations Headline</h2>
                                <p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional
                                    content. This content is a little bit longer.</p>
                                <div class="">
                                    <button class="btn btn-danger  btn-lg " id="cta-video-button">                                
                                            Watch Video CTA
                                    </button>
            
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
</div>
 


    </div>
    
</body>

</html>

【问题讨论】：

您为什么要避免使用媒体查询？这不是一个适合所有类型的交易...您的字体大小在该设备大小下太大了。

标签： css html twitter-bootstrap bootstrap-4

【解决方案1】：

为什么不想使用媒体查询？

我认为你可以解决这个问题，如果你在移动版本上更改标题段落和按钮文本和大小。

【讨论】：

【解决方案2】：

减小您在媒体查询中使用的内容的字体大小或行高。唯一的问题是较小设备的字体更大

【讨论】：