ホームページ > 記事 > ウェブフロントエンド > H5モバイル端末での各種リスト作成方法(1)

H5モバイル端末での各種リスト作成方法(1)

黄舟オリジナル: 2017-03-10 16:28:312512ブラウズ

H5モバイル端末で各種リストを作成する方法(1)

はじめに

モバイルインターネットの発展に伴い、多くのフロントエンド要員がPCからモバイルへ異動しました。フロントエンドの経験が足りないモバイル端末に適している先日書いたブログ記事「Mobile H5 の基礎知識まとめ」が多くのクリックをいただいたので、FungLeo は次回に決定しました。、モバイル端末に焦点を当て、一連のチュートリアルを展開します。

この一連の記事の CSS 部分はすべて SASS 構文で書かれます。SASS を知らない場合は、関連するチュートリアルを読むことをお勧めします。私の「CSS プリコンパイルテクノロジを使用した SASS 学習体験の概要」チュートリアルも含まれます
このシリーズの記事では、ブラウザーのスタイルをリセットするために使用される 2 つの基本ドキュメント reset.scss および mixin.scss と、いくつかの基本的な SASS コードブロックについて説明します。コードは長くなるので、「モバイルターミナルシリーズブログの基本」を参照してください。 .reset.scssとmixin.scss》を取得します

私のレベルは限られており、私の能力は平均的なので、記事には間違いや漏れが必ずあります。そのため、記事にコメントを残してください。できるだけ早く皆さんに感謝します。

最も単純なリスト

まず、達成したい効果は次のとおりです。

H5モバイル端末での各種リスト作成方法(1)

達成するのは、このような単純なリストです。この困難の痕跡はありません。

html code

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>list 1</title>
<link rel="stylesheet" href="../style/style.css">
</head>
<body>
<p class="list_1">
    <ul>
        <li><a href="">这是一个列表1</a></li>
        <li><a href="">这是一个列表2</a></li>
        <li><a href="">这是一个列表3</a></li>
        <li><a href="">这是一个列表4</a></li>
        <li><a href="">这是一个列表5</a></li>
        <li><a href="">这是一个列表6</a></li>
        <li><a href="">这是一个列表7</a></li>
        <li><a href="">这是一个列表8</a></li>
    </ul></p></body></html>

ここで説明する必要があるのは、モバイル端末が <meta name="viewport" content="を追加する必要があるということです。">このコードは、それ以外の場合、モバイルブラウザは Web の PC バージョンとして扱います。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">这段代码.否则移动端的浏览器会当成PC版的网页,是可以伸缩的.

建议,服务器,数据库,后端程序,前台html以及CSS都全部统一为utf-8编码.避免因为编码造成乱码的情况.

SASS代码

.list_1 {    ul {}
    li {
        border-bottom: 1px solid #ddd;padding:0 1.6rem;        
        a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}
    }
}

这里的单位全部使用的是rem,我们reset.scss里面,已经将html的字体大小设置为了62.5%,也就相当于正常情况下的10px.也就是说,上面的1.6rem相当于16px
エンコードによる文字化けを避けるため、サーバー、データベース、バックエンドプログラム、フロントエンドHTML、CSSはすべてutf-8でエンコードされることをお勧めします

。

ここでのすべてのユニットは rem を使用しています。reset.scss では、html のフォントサイズは 62.5% に設定されています。 code> は通常の状況では 10px に相当します。つまり、上記の 1.6rem は 16px に相当します。なぜこのように記述されているかについては、こちらをご覧ください。この記事の冒頭にあるリンクにアクセスして、以前に書いた記事の説明をご覧ください。 Sass を知らない場合は、最初に Sass 関連のチュートリアルを読んでください。1 時間あれば確実に習得でき、2 日あれば非常にスムーズにプレイできるようになります

。 list H5モバイル端末での各種リスト作成方法(1)

まず、レンダリングを見てみましょう:

一見すると、このリストと上のリストに違いはありませんが、よく見てみると、以下の行があることがわかります。

多くの場合、デザイナーがこのようにデザインするのには独自の理由があります。たとえ、フロントエンド担当者として、デザイナーのデザインの細部を忠実に復元する必要があります。これは少し不要だと思います。

コードは最初の例とまったく同じです。

SASSコード

.list_1 {    ul {padding-left: 1.6rem;}
    li {        border-bottom: 1px solid #ddd;padding-right: 1.6rem;        
    a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}
    }
}

実際には、ほんの少し考え方を変えただけです。デモ 1 のロードされた li のパディング値を ul と li に割り当てます。

概要

これらは 2 つの前菜であり、非常に簡単です。次の点を説明する必要があります:
これはリストであるため、要素の幅を設定しないでください。 1行を占めます
幅を設定せずに内側のパディングを設定しても問題ありません。

🎜タイトルが長すぎて改行が発生しないように、必ずオーバーフローを非表示にしてください。

以上がH5モバイル端末での各種リスト作成方法(1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5/CSS3 Web ページの読み込み進行状況バー、ダウンロード進行状況バー、およびその他の古典的なケースの実装次の記事：HTML5/CSS3 Web ページの読み込み進行状況バー、ダウンロード進行状況バー、およびその他の古典的なケースの実装

続きを見る