Kombination von HTML und CSS zur Implementierung adaptiven Codes für mobile Webseiten

Der Inhalt dieses Artikels befasst sich mit dem Code, der HTML und CSS kombiniert, um die Anpassung mobiler Webseiten zu realisieren. Ich hoffe, dass er für Sie hilfreich ist.

Erstens arbeite ich kürzlich an einem Projekt, bei dem ich mobile Webseiten schreibe, die sich hauptsächlich mit adaptiven Themen befassen. Wenn Sie Bootstrap und andere Front-End-Frameworks nicht gut nutzen und keine Zeit verschwenden möchten, ist es ärgerlich, dass Sie sich nicht anpassen können. Hier stelle ich Ihnen meine Methode vor auch eine Kombination der Ideen vieler Menschen.

1. Fügen Sie diese Codezeile zum Kopf hinzu:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

Dieser Satz dient dazu, den Zoom automatisch einzustellen. Er passt sich jedoch nicht vollständig an alle Mobiltelefone an, und Sie verwenden ein Browser-Telefon Während des Modus-Debuggens mag es normal sein, beim Wechsel zum echten Mobiltelefon ist es jedoch tatsächlich abnormal. Wir müssen also noch Änderungen vornehmen.

2. Es wird empfohlen, rem anstelle von px zu verwenden, wenn Sie Magin, Padding, Schriftgröße und andere Attribute verwenden. Hier habe ich einen Teil des JS-Codes bereitgestellt Es gibt keinen Grund, sich Gedanken darüber zu machen, was rem ist. Ich werde einen weiteren Blog schreiben, um es vorzustellen. Es handelt sich um den folgenden JS-Code, der beim Schreiben einer Webseite in HTML eingefügt werden kann. Die 640 im folgenden Code bezieht sich auf die Bildschirmbreite des Mobiltelefons. Im Allgemeinen beträgt die maximale Breite des Mobiltelefonbildschirms auf dem Markt 640 Pixel. Daher wird hier i = 640 verwendet, um sich auf die maximale Breite des Bildschirms zu beziehen. Das Minimum beträgt 320 Pixel, und dann können Sie durch Zitieren der folgenden js Ihre eigene Webseite schreiben. Denken Sie daran, dass 1rem = 100px tatsächlich zur einfachen Konvertierung dient.

<script>
!function(n) {
    var e = n.document,
    t = e.documentElement,
    i = 640,
    d = i / 100,
    o = "orientationchange" in n ? "orientationchange": "resize",
    a = function() {
        var n = t.clientWidth || 320;
        n > 640 && (n = 640),
        t.style.fontSize = n / d + "px"
    };
    e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
} (window);
</script>

3. Okay, lassen Sie mich Ihnen zur Veranschaulichung den Effekt eines Karussells zeigen. Geben Sie zunächst den Code ein:

Verwandte Empfehlungen:

Wie kann ich mithilfe von CSS-Attributen einen Schriftschatteneffekt erzielen? (Codedemonstration)

Wie verwende ich CSS, um automatisch einen Schatteneffekt hinzuzufügen, wenn die Maus zu einem Div-Block bewegt wird?

Durch die Kombination von 2D und 3D in HTML und CSS3 werden Animationseffekte erzielt

Das obige ist der detaillierte Inhalt vonKombination von HTML und CSS zur Implementierung adaptiven Codes für mobile Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!