CSS：如何獲得相對於屏幕寬度的位置和大小？

我有一個相對定位的問題，在下面我的html代碼：CSS：如何獲得相對於屏幕寬度的位置和大小？

<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％。因爲即時通訊爲移動設備開發我還需要在CSS來檢查方向是橫向或寫真，因爲如果它是人像我需要的寬度是設備屏幕寬度的90％，如果是風景，我需要的高度，以一個應用程序是設備高度的90％。

我該怎麼做？

來源

2015-08-25 Mulgard

如果聲明％高度，它將始終從其父元素開始計數。因此，可以說，如果父元素是高度1000像素ITLL留下90％（900px）高度 –

所以加入另一個容器會做的伎倆 – Mulgard

我從來沒有與％。由於寬度測量好的經驗，但如果你有一個父組件，它有一個100％的寬度和您的孩子組件有90％的寬度/高度，不管， - 那麼它應該工作得很好。記住使用的最大和最小寬度/高度，以避免壓扁低於或高於最大 –

您可以使用媒體查詢。

/* 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%; } 
}

來源

2015-08-25 07:41:13

注意我使用了767px的最大寬度。這是Bootstrap從移動視圖跳轉到平板視圖所使用的標準轉折點，在我的體驗中足夠好。 –

CSS：如何獲得相對於屏幕寬度的位置和大小？

回答

相關問題