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= を追加する必要があるということです。 "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

このコードは、それ以外の場合、モバイルブラウザは 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 に割り当てます。

概要