ホームページ >ウェブフロントエンド >htmlチュートリアル >モバイル Web アプリのアダプティブ実践_html/css_WEB-ITnose
モバイル Web アプリのアダプティブ実践_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:53:511074ブラウズ
なぜこれを書くのか
以前、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 に適応する変数。
js で最も重要なことはアダプティブ コードです。アドレス: モバイル端末アダプティブ、zepto、これらは導入されていません。それは単なる単純な例です。
第 3 ステップ、HTML ページ構造
ページ構造は次のとおりです:
header: ヘッダータイトル ;
- nav: ヘッダー ナビゲーション;
- コントローラー: 中央のリスト;
- フッター: 下部のナビゲーション。
- 4 番目のステップ、スプライト画像の生成
スプライト画像生成ツールを使用: スプライト画像を生成し、コードを生成します:
コードを 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 では次のようになります:
タブレットでは次のようになります:
結論
このブログが皆様、特に初心者の方のお役に立てれば幸いです。また、より多くのご意見をいただければ幸いです。
著者: 記事の出典: http://www.cnblogs.com/wang4517/p/4528432.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。