Ich möchte einige HTML-Seiten erstellen, die auf verschiedenen Mobilgeräten angezeigt werden. Ich möchte, dass sie sich automatisch an unterschiedliche Bildschirmgrößen für Mobilgeräte anpassen.
Die HTML-Seiten enthalten Text und Bilder. Die Bilder können größer als 600x450 sein, aber wenn der mobile Bildschirm (zum Beispiel) 280x320 ist, sollten die Bilder automatisch ihre Größe anpassen, um zu passen.
Wie kann ich das machen?
Wenn die Seiten, von denen Sie sprechen, buchstäblich nur Text und Bilder enthalten, denke ich, dass Sie in jeder HTML-Seite Folgendes tun müssen:
Fügen Sie dieses viewport-Meta-Tag im <head>
-Tag hinzu:
<meta name="viewport" content="width=device-width">
Dadurch sollte die Seite in angemessener Größe dargestellt werden.
Fügen Sie dieses <style>
-Tag im <head>
-Tag hinzu:
<style>
img {
max-width: 100%;
}
</style>
Ich denke Dadurch wird sichergestellt, dass alle Bilder nicht breiter als der Ansichtsbereich der Webansicht der App dargestellt werden.
(Wenn dies nicht funktioniert, versuchen Sie stattdessen width: 100%;
. Dadurch werden alle Bilder auf jeden Fall so breit wie das Ansichtsfenster und daher nicht breiter.)
Ihre Frage ist jedoch etwas zu allgemein: Wir könnten am Ende ein Buch schreiben, das alle Möglichkeiten aufzeigt. Könnten Sie den Code, an dem Sie gerade arbeiten, genauer beschreiben?
Diese Technik wird als flüssiges oder adaptives Layout bezeichnet. Es gibt eine gute Einführung hier
Medienabfragen sind der beste Weg, um das zu tun, was Sie möchten.
Richten Sie Ihre HTML-Datei und Ihr Stylesheet wie gewohnt ein, verwenden Sie jedoch am Ende Ihres CSS-Dokuments etwas, das dem folgenden Code ähnelt: Sie müssen die verschiedenen Abfragen für die verschiedenen Gerätbreiten und -layouts erarbeiten, dies sollte jedoch der Fall sein fangen Sie an.
/* iPHONE 3-4 + RETINA PORTRAIT STYLES */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
/* Your adjusted CSS goes here */
}
/* iPHONE 3-4 + RETINA LANDSCAPE STYLES */
@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
/* Your adjusted CSS goes here */
}
Es gibt viele Optionen, von denen die meisten zu detailliert sind, um in einer einzigen Frage zu besprechen.
Es gibt keine "automatische" Methode, es muss manuell codiert werden. Ich kann mir drei Optionen vorstellen, für die weitere Untersuchungen erforderlich sind:
sie können die Medienabfrage verwenden, um Ihr Layout ansprechend zu gestalten, dh alle kleinen, mittleren und großen Bildschirme korrigieren.
für weitere Informationen können Sie dieses Tutorial besuchen - responsives Design in einfachen Schritten lernen