モバイル HTML5 リストの作成方法-H5 チュートリアル-php.cn

モバイル HTML5 リストの作成方法

一个新手

リリース： 2017-09-06 10:21:19

オリジナル

2110 人が閲覧しました

前書き

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

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

最も単純なリスト

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

モバイル HTML5 リストの作成方法

htmlコード

<!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>

ログイン後にコピー

ここで説明する必要があるのは、モバイル端末が

このコードを追加する必要があるということです。そうしないと、モバイルブラウザはそれを次のように扱います。スケーラブルな Web ページの PC バージョン。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

エンコードによる文字化けを避けるため、サーバー、データベース、バックエンドプログラム、フロントエンド 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;}
    }
}
这里的单位全部使用的是,我们里面,已经将的字体大小设置为了,也就相当于正常情况下的10px.也就是说,上面的相当于.至于为什么这么写,请到本文开头的链接里面查看前面我写的文章中的解释. 
不会sass的,请先阅读sass相关教程.不要觉得难,一个小时保证学会,两天能玩的非常溜.

ログイン後にコピー

これはまだ単純なリストです

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

モバイル HTML5 リストの作成方法