HTML響應速度

這是我的HTML和CSS結構：HTML響應速度

/* IMPORTS */ 
 

 

 
/* COMMON STYLES */ 
 
html, body { 
 
\t margin: 0; 
 
\t height: 100%; 
 
\t overflow: hidden 
 
} 
 

 
h1, h2, h3, h4, h5, h6 { 
 
\t margin-top: 5px; 
 
\t margin-bottom: 5px; 
 
} 
 

 
/* PAGE STYLES */ 
 
#video-container { 
 
\t padding: 0; 
 
\t height: 100vh; 
 
} 
 

 
#video { 
 
\t background-color: #6d6; 
 
\t height: 65vh; 
 
} 
 

 
#tv { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 15px; 
 
\t height: 50%; 
 
} 
 

 
#banner { 
 
\t height: 5vh; 
 
\t background-color: #fff; 
 
} 
 

 
#ctrl1, #ctrl2 { 
 
\t height: 30vh; 
 
} 
 

 
#ctrl1 { 
 
\t background-color: #66d; 
 
} 
 

 
#ctrl2 { 
 
\t background-color: #6dd; 
 
} 
 

 
#updates-container { 
 
\t padding: 0 15px; 
 
\t background-color: #d66; 
 
\t height: 100vh; 
 
\t overflow: auto; 
 
} 
 

 
.update-data { 
 
\t height: 35vh; 
 
\t border-bottom: dashed 1px #000; 
 
} 
 

 

 
.update-data:last-child { 
 
\t border-bottom: none !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="row"> 
 
    <!-- LEFT SIDE --> 
 
    <div id="video-container" class="col-xs-8 col-sm-8"> 
 
     <div class="row"> 
 
      <div id="video" class="col-xs-12 col-sm-12"> 
 
       <video autoplay loop id="tv"> 
 
        <source type="video/mp4" src="https://static.videezy.com/system/resources/previews/000/005/571/original/keyboard_02.mp4"> 
 
        <source type="application/ogg" src="https://static.videezy.com/system/resources/preview2s/000/005/571/original/keyboard_02.ogv"> 
 
        <source type="video/webm" src="https://static.videezy.com/system/resources/preview3s/000/005/571/original/keyboard_02.webm"> 
 
        Your browser does not support the video tag. 
 
       </video> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div id="banner" class="col-xs-12 col-sm-12 text-center">SAMPLE BANNER</div> 
 
     </div> 
 
     <div class="row"> 
 
      <div id="ctrl1" class="col-xs-6 col-sm-6"></div> 
 
      <div id="ctrl2" class="col-xs-6 col-sm-6"></div> 
 
     </div> 
 
    </div> 
 

 
    <!-- RIGHT SIDE --> 
 
    <div id="updates-container" class="col-xs-4 col-sm-4"> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 1 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 2 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 3 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 4 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

現在我的問題是，如何將我的DIV updates-container（帶有紅色背景）定位當瀏覽器屏幕很小時...

來源

2017-06-06 Demonyowh

你可以在'.video-container'和'col-lg-4 col-md-4 col-xs上使用col-lg-8 col-md-8 col-xs-12 col-sm-12 -12 col-sm-12「替換爲'.update-container'，這樣當它們到達'col-sm'時，它們都會佔用所有的列。不幸的是，當我嘗試它時，我看不到'.update-container' – Swellar

更改

<!-- LEFT SIDE --> 
<div id="video-container" class="col-xs-8 col-sm-8">

到

<!-- LEFT SIDE --> 
<div id="video-container" class="col-xs-12 col-sm-8">

和：

<!-- RIGHT SIDE --> 
    <div id="updates-container" class="col-xs-4 col-sm-4">

到

<!-- RIGHT SIDE --> 
    <div id="updates-container" class="col-xs-12 col-sm-4">

此外，

html, body { 
    margin: 0; 
    height: 100%; 
    overflow: hidden 
}

溢出：隱藏可能是小屏幕上的問題，您可以使用媒體查詢來修復此問題

來源

2017-06-06 09:55:18

由於您使用引導網格佈局，因此您可以使用一些小技巧來實現您想要的。

正如您所知，bootstrap在一個row上使用了12列。所以如果我們想要創建一個全寬度塊，我們將使用col-12。

lg, md, sm, xs指的是屏幕的寬度。

lg用於大屏幕（≥1200像素）
md爲介質屏幕（≥992px）
sm爲小屏幕（≥576px）
xs額外小屏幕（< 576px）

reference

您希望紅色區域位於小設備上的full-width新<row>上。請參見下面的工作示例：

/* IMPORTS */ 
 

 

 
/* COMMON STYLES */ 
 
html, body { 
 
\t margin: 0; 
 
\t height: 100%; 
 
\t overflow: hidden 
 
} 
 

 
h1, h2, h3, h4, h5, h6 { 
 
\t margin-top: 5px; 
 
\t margin-bottom: 5px; 
 
} 
 

 
/* PAGE STYLES */ 
 
#video-container { 
 
\t padding: 0; 
 
\t height: 100vh; 
 
} 
 

 
#video { 
 
\t background-color: #6d6; 
 
\t height: 65vh; 
 
} 
 

 
#tv { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 15px; 
 
\t height: 50%; 
 
} 
 

 
#banner { 
 
\t height: 5vh; 
 
\t background-color: #fff; 
 
} 
 

 
#ctrl1, #ctrl2 { 
 
\t height: 30vh; 
 
} 
 

 
#ctrl1 { 
 
\t background-color: #66d; 
 
} 
 

 
#ctrl2 { 
 
\t background-color: #6dd; 
 
} 
 

 
#updates-container { 
 
\t padding: 0 15px; 
 
\t background-color: #d66; 
 
\t height: 100vh; 
 
\t overflow: auto; 
 
} 
 

 
.update-data { 
 
\t height: 35vh; 
 
\t border-bottom: dashed 1px #000; 
 
} 
 

 

 
.update-data:last-child { 
 
\t border-bottom: none !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="row"> 
 
    <!-- LEFT SIDE --> 
 
    <div id="video-container" class="col-xs-8 col-sm-8"> 
 
     <div class="row"> 
 
      <div id="video" class="col-xs-12 col-sm-12"> 
 
       <video autoplay loop id="tv"> 
 
        <source type="video/mp4" src="https://static.videezy.com/system/resources/previews/000/005/571/original/keyboard_02.mp4"> 
 
        <source type="application/ogg" src="https://static.videezy.com/system/resources/preview2s/000/005/571/original/keyboard_02.ogv"> 
 
        <source type="video/webm" src="https://static.videezy.com/system/resources/preview3s/000/005/571/original/keyboard_02.webm"> 
 
        Your browser does not support the video tag. 
 
       </video> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div id="banner" class="col-xs-12 col-sm-12 text-center">SAMPLE BANNER</div> 
 
     </div> 
 
     <div class="row"> 
 
      <div id="ctrl1" class="col-xs-6 col-sm-6"></div> 
 
      <div id="ctrl2" class="col-xs-6 col-sm-6"></div> 
 
     </div> 
 
    </div> 
 

 
    <!-- RIGHT SIDE --> 
 
    <div id="updates-container" class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 1 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 2 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 3 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 4 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

通過添加lg, md, sm, xs細節你能夠改變每個screentype的看法。在這種情況下，我已經編輯下面一行：

<div id="updates-container" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">

在lg和md觀點它將作爲一個側邊欄。在sm視圖上它將佔用屏幕寬度的一半。在xs視圖中，每個<div>裏面的updates-container都會有一個全寬的屏幕。

希望這會有所幫助！

來源

2017-06-06 10:11:40 Deathstorm

回答

相關問題