如何使设计的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移动布局在纵向和横向模式

回答

相关问题