如何在纵向和横向模式下为 UI 移动布局制作设计 css

Question

Sample image here

*NB : - 红色是背景 - 蓝色是图像

如何使用CSS/Bootstrap 或其他东西在移动视图中将UI 从纵向模式编码为横向模式，我正在使用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>

Answer 1

您可以为此使用媒体查询

以下作品的纵向视图

@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

Answer 2

纵向/横向取决于设备的屏幕宽度。当您将设备切换到横向模式时，它的尺寸会反转，即高度变为宽度，宽度变为高度。因此，为了实现上面的图像，您需要编写两个具有两个不同屏幕宽度的不同“媒体查询”以使其具有响应性。发布您的代码。