HTML、CSS：ロゴとテキストの反応性のあるヘッダー

他のコンテンツに対応するモバイル&デスクトップWebサイトを作成することを目的に、このWixサイトを再作成しようとすると、サイトを意味するとすぐ、私は別の位置に異なる幅30°の動きを使用してHTML、CSS：ロゴとテキストの反応性のあるヘッダー

http://nl.wix.com/website-template/view/html/936?&viewMode=mobile

、は適切に応答しません。私はこれをどのように修正するのか分かりません。ここに私のコードです：

HTML：

<body> 
    <div class="header"> 
     <h1>30 &deg;C</h1> 
     <div class="clearfix"><img src="./img/banner.png" alt="banner"> </div> 
     <p>Beginning application developer</p> 
    </div> 
</body>

CSS：

.header { 
    background-color: #7A7CB1; 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
} 

.header img { 
    width: 62.5%; 
    margin-top: 2.5%; 
    margin-left: 6.75%; 
    float:left; 
} 

.header h1 { 
    position: absolute; 
    top: 30%; 
    left: 30%; 
    font-size: 200%; 
} 

.clearfix { 
    overflow: auto; 
} 

.header p { 
    margin-left: 6.75%; 
    font-family: Verdana, geneva, sans-serif; 
    font-size: 13px; 
}

私はそれが写真にあるように30°のロゴの下になりたい

が、ロゴとテキスト電話機の幅がそれより小さいか大きい場合は、小さくなるか大きくなります（応答性が高い）。あなたが大きくなるようにテキストをしたい場合は

出典

2017-05-08 Lewis Algawari

どういうところですか？ – DeclanPossnett

最終製品はどのように見えますか？常に温度計の右に30度？下のテキスト？ – StefanBob

私はウェブサイトが反応しやすいようにしたい。したがって、30度は、電話の幅が小さい場合は小さくする必要があります。問題は、30度の位置は写真のどこにとどまっていても、幅が違うからです。 –

は/別のデバイス幅の小さい、あなたはこれが何

@media only screen and (max-width:940px){ /* Tablets*/ 
    h1{ 
     font-size:12px; 
} 
    }

があるときに、最大ここ

Media Screensがメディア画面の一例である追加する必要がありますデバイスの幅は940ピクセル（平均タブレットサイズ）です。 h1のフォントサイズは異なるサイズに設定されています。

出典

2017-05-08 17:35:16

HTML、CSS：ロゴとテキストの反応性のあるヘッダー

答えて

関連する問題