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

Question

Sample image here

*注意:- 红色是背景色 - 蓝色是图像

如何使用 CSS/Bootstrap 或其他方式将移动 View 中的 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 QUERIES”以使其响应。发布您的代码。