如何使設計的CSS UI移動佈局在縱向和橫向模式

Sample image here 如何使設計的CSS UI移動佈局在縱向和橫向模式

*注： - 紅色的顏色是背景 - 藍色爲圖像

如何將UI從縱向模式代碼以移動視圖中的橫向模式使用CSS/Bootstrap或其他內容，我正在使用ionic開發此功能。

這是我的代碼：

<ion-view view-title="Home"> 
    <ion-content class="padding" style="background-color:#616161"> 
     <div class="row row-center row-assertive" style="margin:3px auto;"> 
      <div class="col col-50" align="center"> 
      <a ng-click="secu()"> 
       <img class="shadow" src="img/i-security.png" style=" max-width: 100%"> 
      </a> 
      </div> 
      <div class="col col-50" align="center"> 
      <a ng-click="trip()"> 
       <img class="shadow" src="img/i-trip.png" style=" max-width: 100%"> 
      </a> 
      </div> 
     </div> 
     <div class="row row-center row-royal" style="margin:3px auto;"> 
      <div class="col col-50" align="center"> 
      <a ng-click="find()"> 
       <img class="shadow" src="img/i-find.png" style="width:97%"> 
      </a> 
      </div> 
      <div class="col col-50" align="center"> 
      <a ng-click="logout()"> 
       <img class="shadow" src="img/i-setting.png" style="width:97%"> 
      </a> 
      </div> 

     </div> 
    </ion-content> 
</ion-view>

來源

2017-05-31 Rhizky Putra

你嘗試過這麼遠嗎？此外，請編輯您的問題，堅持[如何創建一個最小，完整和可驗證的例子]（https://stackoverflow.com/help/mcve） – TheDarkKnight

我已經嘗試在網格baic離子，表與bootstrap和另一個。是的 –

縱向/橫向取決於器件屏幕寬度。當您將設備切換到橫向模式時，其尺寸會反轉，即高度變爲寬度，寬度變爲高度。因此，爲了實現上述圖像，您需要編寫兩種不同的「媒體查詢」，並使用兩種不同的屏幕寬度以使其響應。發佈您的代碼。

來源

2017-05-31 05:23:58

我已使用我的代碼編輯了我的問題 –

但是您需要了解「媒體查詢」的概念才能爲不同類型的屏幕尺寸創建動態/響應頁面。爲了在不同類型的屏幕尺寸下測試您的代碼，您可以使用開發人員工具（在谷歌瀏覽器中按F12並點擊響應按鈕） –

接受答案...或給出您的進一步要求。 –

您可以使用此

媒體查詢繼縱向視圖作品

@media only screen and (max-width: 640px) and (orientation: portrait) { 
    /* Add css here */ 
}

繼山水景觀

@media only screen and (max-width: 640px) and (orientation: landscape) { 
    /* Add css here */ 
}

作品詳細請訪問：

media for orientation

media query

來源

2017-05-31 05:48:23 LKG

我的應用程序只是爲Android設備，我想我的應用程序看起來像一個應用程序從三星*應用程序名稱是**智能管理器** –

好吧謝謝分享:)） – LKG

是的，但我沒有看從我的問題匹配答案 –

如何使設計的CSS UI移動佈局在縱向和橫向模式

回答

相關問題