无法在视频上对齐文本

如何解决无法在视频上对齐文本

我设计了一个着陆页，但在移动设备上无法正常工作。

Image 1 Mobile : This is what my interface looks like currently on mobile.

Image 2 Desktop : This is what it looks like on desktop.

问题：我希望移动设备的外观与桌面设备的外观相同。

我的代码如下：

body {
  position: relative;
  overflow: hidden;
  background-color:black;
  font-family: 'Chakra Petch',sans-serif;
  color: white;
}
 video {
  position: absolute;
  top: 0;
  width:100% !important;
  z-index: 1;/*  object-fit is not supported on IE  */
  object-fit: cover;
  opacity: 0.6;
}
 .container {
  z-index: 2;
  position: relative;
  padding-top: 200px;

}


.btn{
  background-color: #36454f !important;
  border-color: #36454f !important;
}

.btn:hover{
  background-color: #476376 !important;
}

<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Anomaly Detection Portal</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
  </head>
<body>
 
        <div class="row">
            <div class="col-md-12">
             
                  
                 <video autoplay muted loop>    
                  <source src="https://player.vimeo.com/external/368320203.sd.mp4?s=38b1bac5d627b94fb902597643461ee5f233d00a&amp;profile_id=139&amp;oauth2_token_id=57447761" type="video/mp4">                 </video>
                 
                 <div class="container">
                   <span style="font-size: 63px">Anomaly Detection Portal</span> 
                     <span>
                       <h4>
                          Use our state-of-the-art technology to find out anomalies in your traffic videos.

                       </h4>
                       <h5>
                        Our futuristic models give the maximum accuracy in more than 90% of the cases.
                       </h5>
                      </span>
                     <a class="btn btn-primary btn-md" href="login" role="button">Proceed Ahead.</a>
                 </div>
                   <!-- /.container -->
                 </div>
                 <!-- /.jumbotron -->
           
     
        </div>
    </div>
</body>

解决方法

您可以使用字体缩放和动态填充来完成这项工作

我做了什么：

将字体大小更改为 vw（视口宽度）
将内边距更改为 10%（从最初的 200 像素）
还使用 vw 为字幕添加了字体大小

如果你不喜欢这个结果，你可以稍微调整一下值

不是 100% 相同，但非常接近

注意：您还可以使用 calc（vw 和 px 一起使用）的混合方法来避免不可读的文本，如下面的链接中所述

更多关于视口 here

body {
  position: relative;
  overflow: hidden;
  background-color:black;
  font-family: 'Chakra Petch',sans-serif;
  color: white;
}
 video {
  position: absolute;
  top: 0;
  width:100% !important;
  z-index: 1;/*  object-fit is not supported on IE  */
  object-fit: cover;
  opacity: 0.6;
}
 .container {
  z-index: 2;
  position: relative;
  padding-top: 10%;

}


.btn{
  background-color: #36454f !important;
  border-color: #36454f !important;
}

.btn:hover{
  background-color: #476376 !important;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Anomaly Detection Portal</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
      </head>
    <body>
     
            <div class="row">
                <div class="col-md-12">
                 
                      
                     <video autoplay muted loop>    
                      <source src="https://player.vimeo.com/external/368320203.sd.mp4?s=38b1bac5d627b94fb902597643461ee5f233d00a&amp;profile_id=139&amp;oauth2_token_id=57447761" type="video/mp4">                 </video>
                     
                     <div class="container">
                       <span style="font-size: 6vw">Anomaly Detection Portal</span> 
                         <span>
                           <h4 style="font-size: 2.5vw">
                              Use our state-of-the-art technology to find out anomalies in your traffic videos.
    
                           </h4>
                           <h5 style="font-size: 2vw">
                            Our futuristic models give the maximum accuracy in more than 90% of the cases.
                           </h5>
                          </span>
                         <a class="btn btn-primary btn-md" href="login" role="button">Proceed Ahead.</a>
                     </div>
                       <!-- /.container -->
                     </div>
                     <!-- /.jumbotron -->
               
         
            </div>
        </div>
    </body>
</html>