割り当てられた寸法でヘッダーが表示されない

私はhtmlとcssでページを作成しています。このページにはモバイル版のヘッダーが80pxの高さで、PC版の高さは150pxで、見出し内にはモバイル版のロゴが70px、幅250px、バージョン85pxの300px 。問題は、Firefoxでページを開いてヘッダ要素を調べるとロゴのサイズが小さくなったことですが、プログラマツールでは割り当てられた寸法が検証されているように見えます。割り当てられた寸法でヘッダーが表示されない

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body{ 
 
    min-width:300px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.Wrapper { 
 
    max-width: 980px; 
 
    margin: 0px auto; 
 
    position: relative; background-color: #fff; 
 
} 
 
header{ 
 
    background: rgba(51,20,10,0.95); 
 
} 
 
/* Mobile */ 
 
@media screen and (max-width: 979px) { 
 
    header{ 
 
    display:block; 
 
    width:100%; 
 
    height:80px; 
 
    } 
 
    a.logo{ 
 
    background-image:url(Logo_M.png); 
 
    width:250px; 
 
    height:70px; 
 
    position: absolute; 
 
    top:5px; 
 
    left:50%; 
 
    transform: translate(-50%, 0%); 
 
    } 
 
} 
 
/* PC */  
 
@media screen and (min-width: 980px) { 
 
    header{ 
 
    width:980px; 
 
    height:150px; 
 
    } 
 
    a.logo{ 
 
    background-image:url(Logo_L.png); 
 
    width:300px; 
 
    height:85px; 
 
    position: absolute; 
 
    top:20px; 
 
    left:56px; 
 
    } 
 
}

<div class="Wrapper"> 
 
    <header> 
 
    <a class="logo" href="#"></a> 
 
    </header> 
 
</div>

出典

2016-06-21 JoaoTS

上部と左を確認してください。あなたのロゴは残っているので、ロゴのその部分を見ることはできません。 –

Hmmです。私が示唆しているいくつかのこと：

スティック命名規則にクラス名を割り当て、クラス名は、CSSの特異性についての一般的な選択肢
ケアではありません、それが戻ってくるとするときあなたを悩ませます大文字メディアクエリを実行すると、あなたは、上書きスタイルの危険になりますよう
回避応答のウェブサイト
必要のない
「表示：ブロック」と「幅：100％」同時に、
表示ブロックa lreadyが画像に幅と高さの両方を割り当てる100％
避けるために幅を設定し、それが

伸縮画像につながることができます私はこの方法で、あなたの問題に取り組むでしょう：

.container { 
 
    max-width: 980px; 
 
    margin: 0 auto; 
 
} 
 

 
.main-header { 
 
    background:rgba(51,20,10,0.95); 
 
    height: 150px; 
 
    text-align: center; 
 
    padding-top: 5px; 
 
} 
 

 

 
@media(max-width:980px) { 
 
    .main-header { 
 
    height: 80px; 
 
    } 
 
    .main-header__logo { 
 
    height: 70px; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<div class="container"> 
 
    <header class="main-header"> 
 
    <a href="#"> 
 
     <img class="main-header__logo" src="http://placehold.it/300x80" alt="logo" /> 
 
    </a> 
 
    </header> 
 
</div> 
 
    
 
</body> 
 
</html>

これが正しい方向にあなたを押してくれることを願っています。

出典

2016-06-21 10:40:21 Snsa90

私はUbuntuのためのFirefox 47.0で、あなたのコードをテストしました。モバイルでは、ロゴは250px/70pxです。

出典

2016-06-21 10:37:27 Molarosa

割り当てられた寸法でヘッダーが表示されない

答えて

関連する問題