モバイル Web アプリのアダプティブ実践_html/css_WEB-ITnose-htmlチュートリアル-php.cn

モバイル Web アプリのアダプティブ実践_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:53:51

オリジナル

1048 人が閲覧しました

なぜこれを書くのか

以前、Web アプリのアダプティブスクリーンに関する記事 (リンク) を書きましたが、ほとんどの人が理解できないので、写真とテキストを含むバージョンを作成します。シンプルなページではありますが、作っていく過程でトラブルも発生したので、それはそれで良かったです！

サンプル github アドレス: https://github.com/iwangx/WebApp アクセスアドレス: https://csssprite.herokuapp.com/

準備

PSD: これはサイズを測定して画像をカットするために使用されます。PSD の解像度は UI に任せるのには同意しません。もちろん幅640ピクセルで作成されました。このPSDはオンラインでダウンロードされました。
CSS スプライト画像作成ツール: 最新バージョン (v4.3) は、複数の画像を 1 つの画像に結合し、コードを生成できる小さなプログラムです (私自身が開発しました)。
Webstorm: フロントエンド開発ツール。
Markman: フロントエンドの次元測色ツール。
Photoshop: 写真をカットするための強力なツール。
Sass: CSS プリコンパイルツール。

最初のステップ、写真をカットします

Photoshop を使用して写真をカットしました。カットされた写真は次のとおりです:

もちろん、白い写真なのでよく見えないかもしれません。

2 番目のステップはフレームワークを構築することです

一般的な構造は次のとおりです。アドレス: https://github.com/iwangx/ WebApp

1. CSS 構造

CSS は主にプリコンパイル済みツールとして Sass を使用します。構造は次のとおりです:

reset.scss ファイルは主に要素のスタイルをリセットするためのもので、
app.scss ファイルは単一のページスタイル用です。モバイル版のカスタマイズサイズ 1 ～ 400 に適応する変数。

2. JS 構造

js で最も重要なことはアダプティブコードです。アドレス: モバイル端末アダプティブ、zepto、これらは導入されていません。それは単なる単純な例です。

第 3 ステップ、HTML ページ構造

ページ構造は次のとおりです:

header: ヘッダータイトル ;

nav: ヘッダーナビゲーション;
コントローラー: 中央のリスト;
フッター: 下部のナビゲーション。

スプライト画像生成ツールを使用: スプライト画像を生成し、コードを生成します:

コードを css ディレクトリの app.scss ディレクトリにコピーします。

もちろん、サイズ変数ファイルを導入することが前提です。それ以外の場合は $ です。 _* は認識されず、エラーが報告されます。

ステップ 5、ページと CSS コーディング

CSS コード:

HTML コード:

@import "size";//所有图片变量@mixin sprite{background:url(../images/sprite.png) no-repeat ;background-size:$_138 $_163;}@mixin icon_right{height:$_59;width:$_59;background-position:0 -$_75 0 -$_5;}@mixin icon_left{height:$_59;width:$_59;background-position:0 0;}@mixin icon_tag{height:$_44;width:$_65;background-position:0 -$_1 0 -$_119;}@mixin icon_person{height:$_44;width:$_65;background-position:0 0 -$_66;}@mixin icon_book{height:$_44;width:$_65;background-position:0 -$_73 0 -$_71;}@mixin icon_more{height:$_44;width:$_65;background-position:0 -$_73 0 -$_119;}body{background: #fbfbfb}.sprite{@include sprite;}.header{position: fixed;background: #dd3131;height: $_90;line-height: $_90;;width: 100%;left: 0;top: 0;font-size: $_40;color: #fff;text-align: center;  button{position: absolute;top: $_16;border: $_2 solid #fff;border-radius: 50%;box-sizing: content-box}}.btn-left{@include icon_left;left: $_16;}.btn-right{@include icon_right;right: $_16;}.nav{display: -webkit-box;position: fixed;left: 0;top: $_90;color: #3d3d3d;font-size: $_30;width: 100%;border-bottom: $_1 solid #e7e5e6;  a{display: block;height: $_60;line-height: $_60;text-align: center;background: #fff;-webkit-box-flex: 1;border-right: $_1 solid #e7e5e6;box-sizing: border-box;}}.controller{padding: $_151 0 $_100 0;}.list{  li{border-bottom:$_1 solid #cfcfcf }  a{display: -webkit-box;padding: $_16;}  img{height: $_122;width: $_122;display: block}}.list-right{-webkit-box-flex: 1;padding-left: $_15;  h1{color: #555;font-size: $_24;}  p{color: #878787;font-size: $_18;margin-top: $_15;line-height: 1.5}}.footer{height: $_100;position: fixed;left: 0;bottom: 0;width: 100%;display: -webkit-box;background: #4a4a4a;text-align: center;  a{display: block;-webkit-box-flex: 1;box-sizing: border-box;padding-top: $_10;border-right: $_1 solid #fff;    &:last-child{border-right: none}  }  i{display: block;margin: 0 auto}  span{color: #fff;font-size: $_24;display: block;margin-top: $_5;}}.icon_book{@include icon_book}.icon_tag{@include icon_tag}.icon_person{@include icon_person}.icon_more{@include icon_more}

ログイン後にコピー

画像が使用されている箇所には、 2 つの主要なクラス、1 つはスプライト画像のクラス、もう 1 つは彼が参照するクラスです。この 2 つは結合されています。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui">    <meta name="author" content="wangxing">    <meta name="screen-orientation" content="portrait">    <meta name="x5-orientation" content="portrait">    <meta name="format-detection" content="telephone=no">    <title>app自适应</title>    <link rel="stylesheet" href="/css/reset.css">    <link rel="stylesheet" href="/css/app.css">    <script src="/js/lib/resize.js"></script></head><body>    <header class="header">        <button class="sprite btn-left"></button>        <span>远程酒业</span>        <button class="sprite btn-right"></button>    </header>    <nav class="nav">        <a href="javascript:;">资讯</a>        <a href="javascript:;">产品</a>        <a href="javascript:;">实战</a>        <a href="javascript:;">讨论</a>    </nav>    <section class="controller">        <ul class="list">            <li>                <a href="#">                    <img src="src" alt="图片">                    <div class="list-right">                        <h1>酒名字</h1>                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>                    </div>                </a>            </li>            <li>                <a href="#">                    <img src="src" alt="图片">                    <div class="list-right">                        <h1>酒名字</h1>                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>                    </div>                </a>            </li>            <li>                <a href="#">                    <img src="src" alt="图片">                    <div class="list-right">                        <h1>酒名字</h1>                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>                    </div>                </a>            </li>            <li>                <a href="#">                    <img src="src" alt="图片">                    <div class="list-right">                        <h1>酒名字</h1>                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>                    </div>                </a>            </li>        </ul>    </section>    <footer class="footer">        <a href="#">            <i class="sprite icon_book"></i>            <span>资讯</span>        </a>        <a href="#">            <i class="sprite icon_tag"></i>            <span>产品</span>        </a>        <a href="#">            <i class="sprite icon_person"></i>            <span>实战</span>        </a>        <a href="#">            <i class="sprite icon_more"></i>            <span>讨论</span>        </a>    </footer></body></html>

ログイン後にコピー

CSS コード内のサイズはすべて $_* であることがわかります。これは、フォントサイズを含む実測サイズです。

これは私たちの Web アプリを構成します

iPhone 5 では次のようになります:

iPhone 6 では次のようになります:

タブレットでは次のようになります:

結論