HTML, CSS: Responsive Kopfzeile mit Logo und Text

Ich habe wirklich eine Menge Probleme beim Versuch, diese Wix-Website mit dem Ziel zu erstellen, die mobile Desktop-Website mit anderen Inhalten reagieren zu können.HTML, CSS: Responsive Kopfzeile mit Logo und Text

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

Sobald ich eine andere Breite, die 30 ° bewegt sich in eine andere Position zu verwenden, die die Website Einrichtung nicht ordnungsgemäß anspricht. Ich habe keine Ahnung, wie ich das beheben kann. Hier ist mein Code:

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

ich unter dem Logo die 30 ° sein will, wie es auf dem Foto ist, aber das Logo und der Text sollte kleiner oder größer (reaktionsfähig) werden, wenn die Breite des Telefons kleiner oder größer ist.

Quelle

2017-05-08 Lewis Algawari

Was ist die Frage? – DeclanPossnett

Wie soll das Endprodukt aussehen? 30 Grad auf der rechten Seite des Thermometers zu jeder Zeit? Text unten? – StefanBob

Ich möchte die Website reagieren. So sollten die 30 Grad kleiner sein, wenn die Telefonbreite kleiner ist, das Logo zu. Das Problem ist die Position der 30 Grad sollte bleiben, wo es auf dem Foto ist, aber es ist nicht auf unterschiedliche Breite –

Wenn Sie den Text werden, größer/kleiner auf unterschiedliche Gerätebreiten wollen, müssen Sie Media Screens

Hier hinzuzufügen, ist ein Beispiel für einen Medien-Bildschirm

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

Was dies bedeutet ist, wenn der max Die Breite des Geräts beträgt 940px (durchschnittliche Tablettgröße). Die Schriftgröße der h1 ist auf eine andere Größe eingestellt.

Quelle

2017-05-08 17:35:16

HTML, CSS: Responsive Kopfzeile mit Logo und Text

Antwort

Verwandte Themen