我不明白如何使這個響應

我成功地使其成爲平板電腦的尺寸，現在我想的電話，但怎麼也讓它敏感，當用戶改變瀏覽器窗口。例如：

這是它應該如何看：

，這是它的外觀調整大小時：

標題「遊戲地圖角色扮演」自動改變其位置，但視頻沒有，還當我調整窗口大小的文本「上更新：「改變其口袋sition和視頻改變其大小，不知道爲什麼：/

它的工作原理好於更大的分辨率壽」

我使用的引導，但我不知道如何解決這一問題：/

這是我的代碼：

<!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">--> 
    <meta name="viewport" content="width=device-width, user-scalable=yes"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>Homepage | Overworld RP Devs</title> 

    <!-- Bootstrap core CSS --> 
    <link href="/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> 

    <!-- Custom styles for this template --> 
    <link href="css/maintemplate.css" rel="stylesheet"> 

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 

    <body> 

    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="/index.html">Overworld Roleplay</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

    <div class="front container"> 

     <h1 class="text-primary" id="title" >Overworld Roleplay</h1> 
     <h4>Development Website</h4> 

    </div><!-- /.container --> 

    <!-- <div class="videoWrapperOuter"> 
     <div class="videoWrapperInner"> 
      <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe> 
     </div> --> 

    <div class="video container"> 
     <div class="col-md-8"> 
      <div class="vid"> 
       <iframe src="//www.youtube.com/embed/ac7KhViaVqc" frameborder="0" allowfullscreen></iframe> 
       <h2 class="text-info" id="last" >Last Update:</h2> 
      </div><!--./vid --> 
     </div><!--.col --> 
    </div> 

    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
    <script src="../../dist/js/bootstrap.min.js"></script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 
    <script src="/js/collapse.js"></script> 
    <script src="/js/transition.js"></script> 
    <script src="/js/tooltip.js"></script> 
    <script src="/js/tab.js"></script> 
    <script src="/js/scrollspy.js"></script> 
    <script src="/js/popover.js"></script> 
    <script src="/js/npm.js"></script> 
    <script src="/js/modal.js"></script> 
    <script src="/js/dropdown.js"></script> 
    <script src="/js/carrousel.js"></script> 
    <script src="/js/button.js"></script> 
    <script src="/js/alert.js"></script> 
    <script src="/js/affix.js"></script> 
    </body> 
</html> 

body { 
    padding-top: 50px; 
} 

.starter-template { 
    padding: 40px 15px; 
    text-align: center; 
} 

html, body { 
    background-color: black; 
    background: url(/images/bg.jpg); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    /*background-position: center;*/ 
    height: 100%; 
    margin: 0; 
} 

.front { 
    position: absolute; 
    margin-left: 54%; 
    margin-top: 7%; 
    width: 46%; 
} 

#title { 
    font-size: 60px; 
    word-wrap: normal; 
} 

.vid { 
    width: 100%; 
    margin-top: 16%; 
    margin-left: 3%; 
} 


iframe { 
    max-width: 100%; 
    height: auto; 
    width: 78%; 
    height: 240px; 
} 

.navbar { 
    background-color: rgba(0, 0, 0, 0.6); 
    background: rgba(0, 0, 0, 0.6); 
    border-color: rgba(0, 0, 0, 0.4); 
} 

.nav.navbar-nav.navbar-right li a { 
    color: white; 
} 

.navbar-default .navbar-brand { 
    color: white; 
} 

.navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus { 
    color:black; 
} 

#last { 
    position: absolute; 
    left: 5%; 
    top: 15%; 
} 

.video { 
    position: absolute; 
} 

@media only screen and (min-width:321px) and (max-width:768px) { 
    iframe {display: none;} 
    #last {display: none; } 
    .front {margin-left: 28%; text-wrap: nowrap; text-align: center;} 
} 

@media only screen and (min-width:768px) and (max-width:1024px) { 
    iframe {width: 500px; height: 300px; margin-top: 6%;} 
}

正如你可以看到我有兩個@media在這工作我的平板電腦，其爲1024x768的底部和我的手機，這是小。

我所做的這些修改：

.vid { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.vid iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

但現在我不知道如何正確地調整它的大小： http://imgur.com/a/FmTjP

來源

2017-03-21 Andrei Civili

添加到您的CSS，它應該縮放時使視頻響應在窗前。

.vid { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.vid iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

來源

2017-03-21 15:24:29 Conor

呃，我該如何讓它變小？我是否在.vid iframe中編輯寬度和高度？ http://imgur.com/a/FmTjP –

將它們添加到樣式表中。同時刪除'video container''div'，並將'vid'父類改爲'col-md-6'。 – Conor

做了你說的話，它在全屏時運行良好，但如果我調整窗口大小，發生這種情況：http：//imgur.com/a/NE1C1：/ –

我不明白如何使這個響應

回答

相關問題