ポートフォリオモードの電話機で絶対的な要素が反応しない

Question

私はページの上に絶対DIVを置いています。私はそれが応答するように、それはより小さいデバイスで小さくなり、携帯電話のポートレートモード（私はiPhone &サムスンでそれをテストしました）を除いて、ノートパソコンと携帯電話の風景モードで動作するようです。私はそれが何であるか分かりません。 @mediaクエリを聞いているようではありません。@mediaクエリの外で実際のdivの幅と高さを変更すると、サイズが小さくなるだけです。

あなたがここにDIV見ることができます：http://f4g.marilnu149.149.axc.nl/index.html（左上のロゴ）

CSS：（私はスケルトンを使用しています）を

.logo { 
    position: absolute; 
    margin-top: 0; 
    margin-left: 50px; 
    width: 10em; 
    height: 10em; 
    background: #201616; /* Old browsers */ 
    background: -moz-linear-gradient(top, #201616 0%, #7c1b1b 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #201616 0%,#7c1b1b 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #201616 0%,#7c1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#201616', endColorstr='#7c1b1b',GradientType=0); /* IE6-9 */ 
} 

.logo img { 
    max-width: 100%; 
} 

/* Larger than mobile */ 
@media (min-width: 400px) { 
    .logo { 
    width: 4em; 
    height: 4em; 
    } 
} 

/* Larger than phablet (also point when grid becomes active) */ 
@media (min-width: 550px) { 
    .logo { 
    width: 4.5em; 
    height: 4.5em; 
    } 
} 

/* Larger than tablet */ 
@media (min-width: 750px) { 
    .logo { 
    width: 5em; 
    height: 5em; 
    } 
} 

/* Larger than desktop */ 
@media (min-width: 1000px) { 
    .logo { 
    width: 8em; 
    height: 8em; 
    } 
} 

/* Larger than Desktop HD */ 
@media (min-width: 1200px) { 
    .logo { 
    width: 10em; 
    height: 10em; 
    } 
} 

HTML：

<div class="logo"> 
    <img src="images/logo.png" /> 
</div> 

感謝あなたを助けることができる誰かに事前にあなた！

Answer 1

私の知るところでは、デバイスの@mediaはに設定されておらず、 400pxより小さい。すべての@mediaクエリではmin-widthと表示され、幅がより大きいデバイスに適用されます。したがって、400pxより狭いデバイスの場合、プライマリ.logoの定義で標準値のwidth: 10emが使用されます。

このように、1つのオプションは、基本的な定義を10emより小さい値に変更するだけです。 3em：

.logo { 
    position: absolute; 
    margin-top: 0; 
    margin-left: 50px; 
    width: 3em; 
    height: 3em; 
    … 
}