CSS:如何获得相对于屏幕宽度的位置和大小？

Question

我的相对定位有问题，在下面的 html 代码中:

<ion-view class="menu-content" view-title="Postkarte">
    <ion-content>
        <div class="postcard">

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

还有我当前的 CSS:

.postcard {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-position: center center;
    background-image: url("../img/frames/postcard_00.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 354px;
    height: 250px;
}

如您所见，我定义了绝对宽度和高度(354 和 250 像素)。我试图将宽度设置为 90%，但这使 div 太小了。我猜只有 5 x 5 像素。我希望它占我设备宽度的 90%。由于我正在为移动设备开发应用程序，因此我还需要检查方向是横向还是纵向，因为如果是纵向，我需要宽度为设备屏幕宽度的 90%，如果是横向，我需要高度为为设备高度的 90%。

我该怎么做？

Answer 1

您可以使用媒体查询。

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

      .postcard { height:90%; }

}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
       .postcard { width:90%; }
}