CSS: How to get position and size relative to screen width? -

i have problem relative positioning, in following html code:

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

and current 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; } 

as can see defined width , height absolute (354 , 250px). tried set width 90% made div small. guess 5 x 5 px. want @ 90% of width of device. since im developing app mobile devices need check in css if orientation landscape or protrait because if portrait need width 90% of devices screen width , if landscape need height 90% of devices height.

how can that?

you can use media queries.

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