モバイル端末プロジェクト開発概要

今回のモバイルページ開発では、多くの新しいことに出会いました。まず、モバイルページの開発では、モバイル端末のさまざまな画面サイズを考慮して、さまざまなレイアウトを使用する必要があります。画面の小さなモバイルデバイスでも望ましい効果を得ることができます。ページ上の情報量を減らし、元のレイアウトスキームをモバイル端末に適したものに変更する必要がある場合があります。タブレットなどの中程度の画面サイズのモバイル デバイスでは、水平画面と垂直画面のレイアウト ソリューションを検討する必要があります。これらのニーズから派生したのが、いわゆるレスポンシブ レイアウト ソリューションです。レスポンシブ レイアウトの焦点は、メディア クエリを通じて、さまざまな画面サイズのデバイスに異なる CSS スタイルを使用できることです。この場合、異なるものを記述するのではなく、さまざまな CSS スタイルに直接適応できます。さまざまなデバイス用のページを作成する場合、必要なのは HTML ファイルと CSS ファイル 1 つだけです。

レスポンシブレイアウトを使用するには、まずページ先頭のメタデータタグに「viewport」を設定し、その中にレスポンシブレイアウトに必要な一連のパラメータを設定する必要があります。 「ビューポート」を設定した後、CSS でメディア クエリを記述して、さまざまな画面サイズのデバイスにさまざまなレイアウト スキームを使用できます。

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

上記はモバイル端末プロジェクト開発の概要です。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) をご覧ください。