Pomoc w programowaniu, odpowiedzi na pytania / Html / Iphone 6 css3 sprawia, że jest w połowie wielkości - html, css, css3, frontend

Iphone 6 css3 czyni go w połowie wielkości - html, css, css3, frontend

Znalazłem ten naprawdę fajny iPhone css3. Jednak jest to sposób na zwiększenie. Chciałbym mieć go o połowę mniejszy niż teraz. Albo nawet o jedną czwartą.

Ale bardzo trudno mi to zmienić. Wiem, że mogę dopasować wysokość za pomocą znacznika! Ważny, ale potem powoduje to wzrost wymiarów, takich jak przycisk.

Jaki jest najlepszy sposób osiągnięcia tego celu? Czy można go zmienić na względne parametry, takie jak%? I jak mam to zrobić.

HTML:

<div class="row" style="vertical-align: middle;text-align: center; margin-top: -150px;">
<div class="marvel-device iphone6 silver"  >
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="volume"></div>
<div class="camera"></div>
<div class="sensor"></div>
<div class="speaker"></div>
<div class="screen">
<h1>0483/519.007</h1>
</div>
<div class="home"></div>
<div class="bottom-bar"></div>
</div>
</div>

CSS:

.iphone6 {
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);
width: 375px;
height: 667px;
padding: 105px;
background: #d9dbdc;
-webkit-border-radius: 56px;
border-radius: 56px;
-webkit-box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
}

.iphone6 h1 {
color: black;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
left: 20%;
top: 48%;
width: 100%;
}

Zewnętrzna biblioteka i skrzypce: