地鐵UI CSS響應

我正在使用的Metro UI的CSS網站;能夠創建瓷磚區域並指定單個瓷磚，但我遇到問題，使其對移動設備作出響應，因爲某些瓷磚在使用較小的設備時會延伸離開屏幕。地鐵UI CSS響應

這裏是我到目前爲止的代碼

<body class="content" id="main"> 

    <div class="tile-area fg-white" style="height: 100%; max-height: 100% !important;"> 
     <h1 class="tile-area-title">HERMA</h1> 

     <div class="tile-group double"> 
      <div class="tile-container"> 
       <div class="tile-wide bg-green fg-white" data-role="tile"> 
        <div class="tile-content iconic"> 

        </div> 
       </div> 

       <div class="tile-wide bg-green fg-white" data-role="tile"> 
        <div class="tile-content iconic"> 

        </div> 
       </div> 

       <div class="tile-wide bg-green fg-white" data-role="tile"> 
        <div class="tile-content iconic"> 

        </div> 
       </div> 
      </div> 
     </div> 
     <!-- ./tile-group double --> 

     <div class="tile-group double"> 
      <div class="tile-container"> 
       <div class="tile-large bg-green fg-white" data-role="tile"> 
        <div class="tile-content iconic"> 

        </div> 
       </div> 

       <div class="tile-wide bg-green fg-white" data-role="tile"> 
        <div class="tile-content iconic"> 

        </div> 
       </div> 
      </div> 
     </div> 
     <!-- ./tile-group double --> 

     <div class="tile-group double"> 
      <div class="tile-container"> 
       <div class="tile-wide bg-green fg-white" data-role="tile"> 
        <div class="tile-content iconic"> 

        </div> 
       </div> 

       <div class="tile-wide bg-green fg-white" data-role="tile"> 
        <div class="tile-content iconic"> 

        </div> 
       </div> 

       <div class="tile-wide bg-green fg-white" data-role="tile"> 
        <div class="tile-content iconic"> 

        </div> 
       </div> 
      </div> 
     </div> 


    </div> 
</body>

，並在頁面

.content:before 
{ 
    content: ""; 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: 0; 

    display: block; 
    background-image: url("/img/dark-abstract-hd-wallpapers.jpg"); 
    background-size: cover; 
    data-role: fitImage; 
    width: 100%; 
    height: 100%; 

    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
} 

.content 
{ 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: 0; 
    margin-left: 20px; 
    margin-right: 20px; 
} 

#main 
{ 
    width: 100%; 
    position: relative; 
    margin: 0 auto; 
    line-height: 1.4em; 
} 

@media only screen and (max-width: 479px) 
{ 
    #main 
    { 
     width: 90%; 
    } 
}

的CSS是什麼使得它響應因此可以通過屏幕假設我減少滾動的方式我電腦屏幕尺寸或使其對手機敏感。我在這裏先向您的幫助表示感謝。

來源

2016-09-23 CE0

嘗試在其可與F12而不是改變整個計算機的屏幕分辨率被打開Chrome瀏覽器調試面板使用按鈕「切換裝置」（左上角）。那麼問題可能會消失。

來源

2016-10-16 18:16:14 overt

地鐵UI CSS響應

回答

相關問題