Zusammenfassung der Projektentwicklung für mobile Endgeräte

Bei dieser mobilen Seitenentwicklung bin ich auf viele neue Dinge gestoßen. Das erste ist das responsive Layout. Bei der mobilen Seitenentwicklung müssen Sie die unterschiedlichen Bildschirmgrößen mobiler Endgeräte berücksichtigen der gewünschte Effekt auf mobilen Geräten mit kleinen Bildschirmen. Es kann erforderlich sein, die Informationsmenge auf der Seite zu reduzieren und das ursprüngliche Layoutschema in ein für mobile Endgeräte geeignetes Layoutschema zu ändern. Bei Mobilgeräten mit mittlerer Bildschirmgröße, wie z. B. Tablets, müssen Sie den Layoutplan für horizontalen Bildschirm, vertikalen Bildschirm usw. berücksichtigen. Aus diesen Anforderungen abgeleitet ist die sogenannte Responsive-Layout-Lösung. Der Schwerpunkt des Responsive-Layouts liegt darin, dass Sie durch Medienabfragen unterschiedliche CSS-Stile für Geräte mit unterschiedlichen Bildschirmgrößen verwenden können Um Seiten für verschiedene Geräte zu erstellen, benötigen Sie nur eine HTML-Datei und eine CSS-Datei.

Um ein responsives Layout zu verwenden, müssen Sie zunächst „Ansichtsfenster“ im Metadaten-Tag am Kopf der Seite festlegen und eine Reihe von Parametern festlegen, die für ein responsives Layout erforderlich sind. Nachdem das „Ansichtsfenster“ festgelegt wurde, können Sie Medienabfragen in CSS schreiben, um unterschiedliche Layoutschemata für Geräte mit unterschiedlichen Bildschirmgrößen zu verwenden.

#nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 136px;
    background: #fff;
}
#nav a{
    width: 25%;
    height: 135px;
    position: relative;
}
#nav a span{
    display: block;
    margin: 15px 0 0 47px;
}
#nav a p{
    margin-left: 55px;
    font-size: 26px;
    color:#000;
    position: absolute;
    bottom: 15px;
}

<nav id="nav" class="test">
            <a href="index.html" class="fl">
                <span class="img icon-6"></span>
                <p>首页</p>
            </a>
            <a href="category.html" class="fl">
                <span class="img icon-7"></span>
                <p>分类</p>
            </a>
            <a href="search.html" class="fl">
                <span class="img icon-8"></span>
                <p>发现</p>
            </a>
            <a href="personal-information.html" class="fl">
                <span class="img icon-9"></span>
                <p>我的</p>
            </a>
        </nav>

Das Obige ist die Zusammenfassung der Projektentwicklung für mobile Endgeräte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!